Question

我正在使用以下代码更改我的菜单位置以固定滚动：

var $stickyEl = $('#sticky-menu');
var elementBeforeHeight = $('.startHandle').height();
$window.on('scroll', function(){
    if($(window).scrollTop() >= elementBeforeHeight){
        $stickyEl.addClass('navbar-fixed-top');
        $stickyEl.removeClass('navbar-static-top');
    }
    else{
        $stickyEl.addClass('navbar-static-top');
        $stickyEl.removeClass('navbar-fixed-top');
    }
});

它有效，但它有一个小bug。改变的时刻使菜单后的内容跳到菜单附近。我想这是某种默认行为。知道如何防止这种情况吗？

我想我应该设置与navbar之前的div相关的填充。有没有办法做到这一点？我的目标是有图片，然后滚动它，看看网站的其余部分。然后我希望我的导航栏固定并保持最佳状态。

编辑：
这是我的HTML：

<header>
    <a href="#sticky-menu" class="page-scroll">
        <div name="startSection" class="content startHandle" id="startPhoto" data-stellar-background-ratio="0">
            <img id="startHeader" class="col-md-8 col-xs-12" src="images/home_title.png">
        </div>
    </a>
</header>
<?php include 'include/fixed_menu.php' ?>
<div class="content container newAlbumSection" id="startContent">
further content...
</div>

fixed_menu.php：

<div id="sticky-menu">
    <nav class="navbar navbar-static-top navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav margins-navbar">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="/bg/lc/">HOME</a>
                    </li>
                    <li>
                        <a href="/bg/lc/bio/">BIO</a>
                    </li>
                    <li>
                        <a href="/bg/lc/discography/">DISCOGRAPHY</a>
                    </li>
                    <li>
                        <a href="/bg/lc/press/">PRESS</a>
                    </li>
                    <li>
                        <a href="/bg/lc/video">VIDEO</a>
                    </li>
                    <li>
                        <a href="/bg/lc/photo">PHOTO</a>
                    </li>
                    <li>
                        <a href="/bg/lc/contact">CONTACT</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

</div>

的CSS：

body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.content {
  background-attachment: fixed;
}
#startPhoto {
      background: url("../images/home_photo.png") no-repeat;
      background-size: 100% 100%;
      height: 57em;
}

#startHeader{
      position: absolute;
      padding-top: 0;
      left: 0.5em;
      bottom: 0;
}

结果： https://github.com/matplotlib/matplotlib/pull/5104

Answer 1

您的原始问题并不难解决，只需在下面的内容上切换一些边距（或填充），其高度与菜单一样。并且正如评论中所建议的那样：

.topspace {
margin-top: 50px;
}

$(function() {

var gate = $(window),
sticky = $('#sticky-menu'),
size = $('.startHandle').height(),
content = $('#startContent'),
fixed;

gate.on('load', function() {

// Timeout is for cached scroll position with Opera

    setTimeout(function() {

        if (gate.scrollTop() <= size) {
        sticky.addClass('navbar-static-top');
        fixed = false;
        }
        else {
        sticky.addClass('navbar-fixed-top');
        fixed = true;
        }
    }, 50);
})
.scroll(function() {

    if (gate.scrollTop() > size) {
    if (!fixed) {
    switchMenu();
    content.addClass('topspace');
    }
    }
    else {
    if (fixed) {
    switchMenu();
    content.removeClass('topspace');
    }
    }
});

function switchMenu() {

    sticky.toggleClass('navbar-fixed-top navbar-static-top');
    fixed = !fixed;
}
});

添加一个检查以查看切换是否已经更好，否则它将继续尝试在每个滚动事件上切换类。不要介意我使用我自己的编码约定......

但在我的（Windows 7）机器上还有另一个错误。到达粘性菜单切换的点，我被阻止进一步滚动。这个页面被“卡住”了，所以说。在你的帖子中看不到。更奇怪的是，当我打开开发人员工具（并且它停靠在窗口上）或调整到较小的屏幕尺寸时，问题就消失了。

我可以调查一下。

防止元素在将位置动态更改为固定时移动

1 个答案: