当将位置更改为动态固定时，防止元素移动 [英] Prevent elements from moving when changing position to fixed dynamically

问题描述

我使用以下代码将我的菜单位置更改为固定：

I'm changing position of my menu to fixed on scroll with following code:

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

它可以工作，但它有一个小错误。改变的时刻使菜单后的内容跳到菜单附近。我猜这是一种默认行为。任何想法如何防止这种情况？

It works but it has one little bug. The moment of change causes content after menu to jump closer to menu. I guess this is some kind of default behavior. Any idea how to prevent this?

我想我应该设置padding与div在navbar之前相关。有什么办法吗？我的目标是有图片，然后滚动它，看到网站的其余部分。

I suppose I should set padding that relates to div that is before navbar. Is there any way to do this? My goal is to have picture then scroll it and see the rest of website. Then I want my navbar to become fixed and stay on top.

编辑：

这是我的html：

Here is my 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：

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/

推荐答案

您的原始问题不是太难解决，只是切换一些边缘（或填充）下面的内容与菜单一样的高度与它。正如注释中所建议的：

Your original question isn't too hard to solve, just switch some margin (or padding) on the content below with the same height as the menu along with it. And as suggested in the comments :

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

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

Adding a check to see if the switch has been made would be better too, otherwise it will keep trying to toggle the class on every scroll event. Don't mind me using my own coding conventions by the way...

但在我的（Windows 7）机器有另一个错误。到达粘性菜单正在切换的点，我被阻止进一步滚动。页面被卡在那里，所以说。在您的信息中看不到。甚至陌生人，当我打开开发工具（它停靠到窗口）或调整到较小的屏幕大小的问题已经走了。

But on my (Windows 7) machine there's another bug. Reaching the point where the sticky menu is switching, I'm prevented from scrolling any further. The page gets 'stuck' there, so to say. Don't see that in your post. Even stranger, when I open developer tools (and it is docked to the window) or resize to a smaller screen size the issue is gone.

我可以看看。

这篇关于当将位置更改为动态固定时，防止元素移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！