Geek asks and answers

Fix menu bar at the top of page after scrolling title

Firstly, I apologize if this is too open a question.

I know that the title of the webpage is static, so it always appears at the top of the viewport, and the content goes under it when scrolling down. This can only be achieved with css.

I was wondering how you could let the title scroll from the page, but leave the horizontal menu bar static at the top. http://www.forexfactory.com is a great example of this.

I see that it calls a JavaScript function onHeaderComplete.execute(), which I assume applies an extra CSS style to the navigation bar when the title scrolls, but I'm not sure how it works. Any basic explanation is appreciated since my JavaScript skills are relatively limited.

+5
source share
3 answers

I just answered a similar question. CHECK THIS QUESTION

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

Demo

+12
source

You can write like this:

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

CSS

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

Check out http://jsfiddle.net/a42qB/

+7
source

CSS, . , , , , CSS, jquery:

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

CSS:

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

Here's a fiddle for you: https://jsfiddle.net/brghtk4z/1/

+2
source

More articles:


All Articles