CODEWITHSUNDEEP
htmlcssheaderscrollfixed
Andrew
Andrew

Reputation: 67

How do I make my header div scroll until it reaches the top of the page?

I'm currently using fixed positioning to keep my header at the top of the page, even as users scroll. However, I'd like to add a logo and other content above the header, but not remain fixed like the header does. Is there a way to use CSS or HTML to have the header scroll normally with this content until the header reaches the top of the page, where it will act as it does now and hover above the text on the page?

Update
I'm not very experienced with jQuery and Javascript. This is the HTML code for my header: 

<div class="navbar-fixed-top" role="navigation">
    <div class="container">
            <ul class="pull-left">
                <li class="selected"><a href="index.html">Home</a></li>
                <li><a href="about/index.html">About</a></li>
                <li><a href="clients/index.html">Clients</a></li>
            </ul>
                <div class="logobackground">
                    <a href="index.html"><img class="logo" src="img/logo.png"></a>
                </div>
            <ul class="pull-right">
              <li><a href=“mailto:[email protected]">Contact</a></li>
        </ul>
    </div>
</div>

What Javascript or jQuery would I have to use and where would I put it in my site's directory?

Upvotes: 1

Views: 1901

Answers (2)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

I think this would be better, as I always use this approach while doing these kind of things.

Steps:

  1. Handle window's .onscroll event
  2. Fetch window.pageYOffset
  3. Set div's .style.marginTop to window.pageYOffset with a ternary operator(condition for stopping it).

Like for example:

window.onscroll = function() {
    document.getElementById("myDiv").style.marginTop = window.pageYOffset <= 147 ? 147 : window.pageYOffset;
}

Note: Never use jQuery for these type of small things. It puts load onto the server.

Upvotes: 0

Danny van Holten
Danny van Holten

Reputation: 932

You need javascript (jquery) for this.

The following jsfiddle http://jsfiddle.net/5n4pF/4/ (not the neetest example) show how to do this. The most important thing is that the jquery is correct. You should use:

$(window).scroll(function(){
        if ($(window).scrollTop() >= 147) {
            $("#top_nav").addClass("fixed");

        } else {
            $("#top_nav").removeClass("fixed");
        }
});

now you can style your #top_nav.fixed so it will stay at the top of the page and your #top_nav so it has a normal position.

Upvotes: 4

Related Questions