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

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

它可以工作，但它有一个小错误。更改的时刻会导致菜单后的内容跳到更靠近菜单的位置。我想这是某种默认行为。知道如何防止这种情况吗？

我想我应该设置与导航栏之前的 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;
}

结果： http://bez-granic.eu/lc/

Answer 1

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

.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) 机器上还有另一个错误。到达粘性菜单切换的位置，我被阻止进一步滚动。可以说，页面“卡在”那里。在你的帖子中没有看到。更奇怪的是，当我打开开发人员工具（并且它停靠在窗口中）或调整为更小的屏幕尺寸时，问题就消失了。

我可以调查一下。