Question

我试图创建一个布局，其中徽标下面有一个水平菜单，当用户滚过徽标时，菜单会固定在顶部。

$(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'});
    }
});

这样做我还必须更改主要内容的margin-top，否则会跳转。

示例：

http://jsfiddle.net/7R89x/

虽然固定菜单似乎正常工作，但当我更改内容部分的边距时，它现在与页面底部的页脚重叠。我该如何解决这个问题？

Answer 1

你添加margin-top的原因是什么：50px到content-text？

删除它只是工作正常。

$(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

我会这样做。 OR - 以下两种方式之一。如果你确定知道高度，你可以添加和删除类。如果你没有，你可以查询它们。这是a jsFiddle.

我认为真正的问题是FF是严格的，而你的主要模块并不是真正有条理的盒式模型。如果你将它们全部浮动并使它们的宽度为100％等，它们将很好地叠加。整个表格单元格的东西很糟糕。你最好还有漂浮物的一致性。

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

你正在做的一切都很好，而你面临的问题是因为content-text的高度是外部div（100）的content，它是100％。但是你指的是让我们说5%的余量。然后它会导致溢出5％..正如你所知。

所以我的建议也改变了高度.. 更新链接： http://jsfiddle.net/7R89x/1/

代码：

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

只需

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'});
}

完美无缺地工作..

更新：http://jsfiddle.net/7R89x/3/

在滚动时遇到固定元素的问题

3 个答案:

HTML

CSS

JQUERY