滚动上的固定元素遇到麻烦

Question

I'm attempting to create a layout where there is a horizontal menu under the logo, and when the user scrolls past the logo the menu becomes fixed at the top.

$(window).scroll(function(e) {
    $el = $('#menu');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('#menu').css({'position': 'fixed', 'top': '0px'});
        $('#content-text').css({'margin-top': '50px'});
    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('#menu').css({'position': 'static', 'top': '100px'});
        $('#content-text').css({'margin-top': '0px'});
    }
});

In doing so I also have to change the margin-top of the main content, otherwise it jumps.

Example:

http://jsfiddle.net/7R89x/

While the fixed menu appears to be working, when I change the margin on the content section it now overlaps the footer at the bottom of the page. How can I fix this?

Answer 1

What is the reason you add that margin-top: 50px to content-text?

removing that just works fine.

$(window).scroll(function(e) {
    $el = $('#menu');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('#menu').css({'position': 'fixed', 'top': '0px'});

    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('#menu').css({'position': 'static', 'top': '100px'});

    }
});

http://jsfiddle.net/7R89x/2/

Answer 2

I would do it this way. OR - one of the 2 ways below. If you know the heights for sure, you can just add and remove class. If you don't, you can just query them. Here is a jsFiddle.

I think the real issue is that FF is strict, and your major blocks aren't really organized box-model wise. If you float them all left and make them width 100% etc, they will stack nicely. The whole table-cell thing is whack. You are better off with the consistency of floats.

HTML

<header>
    header
</header>

<nav>
    <ul class="menu">
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
    </ul>
</nav>

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi id dicta asperiores placeat tempore doloribus eius consequuntur vero libero fugiat quidem officia. Quae est temporibus non ad reiciendis excepturi doloribus!</p>

    <ul>
        <li>to show scroll</li>
        <li>etc.</li>
    </ul>
</section>

CSS

* {
    box-sizing: border-box;
}

header, nav, section {
    width: 100%;
    float: left;
}

body {
    margin: 0;
}

header {
    background: red;
    min-height: 100px;
}

nav {
    background: lightblue;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

section {
    background: orange;
    min-height: 1200px
}

.fixed-header nav {
    position: fixed;
    top: 0;
    left: 0;
}
.fixed-header section {
    background: lime;
    /* you could set margin here, if you know the nav height for sure */
}

jQUERY

$(window).on('scroll', function() {

    var navHeight = $('nav').outerHeight();
    var headerHeight = $('header').outerHeight();

    if ( $(this).scrollTop() > headerHeight ) {

        $('body').addClass('fixed-header');
        $('section').css({
            'margin-top' : navHeight 
        });

    } else if ( $(this).scrollTop() <= headerHeight ) {

        $('body').removeClass('fixed-header');
        $('section').css({
            'margin-top' : 0 
        });

    }

});

Answer 3

Everything you are doing is good, and the problem you are facing is because the height of the content-text is 100 of the outer-div( content ) which is 100%. But you are specifying a margin of let's say 5% . Then it will cause an overflow 5%.. As you are getting.

So my advise change the height as well.. Updated link: http://jsfiddle.net/7R89x/1/

code:

if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
    $('#menu').css({'position': 'fixed', 'top': '0px'});
    $('#content-text').css({'margin-top': '5%','height':'95%'});
}
if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
    $('#menu').css({'position': 'static', 'top': '100px'});
    $('#content-text').css({'margin-top': '0px','height':'100%'});
}

OR

Just

if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
    $('#menu').css({'position': 'fixed', 'top': '0px'});
    $('#content').css({'margin-top': '50px'});
}
if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
    $('#menu').css({'position': 'static', 'top': '100px'});
    $('#content').css({'margin-top': '0px'});
}

works flawlessly..

Updated: http://jsfiddle.net/7R89x/3/