将div设置为position：固定在jquery上滚动导致下面的内容跳起来 [英] setting div to position: fixed on scroll with jquery causes content below to jump up

问题描述

当您向下滚动时，顶部酒吧上升，当顶部酒吧不见时，酒店的头部被设置为 position：fixed; 。发生这种情况的时候，下面的内容会通过1个滚轮点击向上跳跃。

我假设它可能是我忽略的简单东西，但是想要检查是否有其他人看到了这个问题。我仔细研究过，但无法真正看到发生了什么。

我已经设置了一个jsfiddle来完整显示此代码。

>

http://jsfiddle.net/yZVjU/

  $（document）.ready（function（）{
 var s = $（＃header）; 
 var pos = s.position（）; 
 $（window）.scroll（function（）{
 var windowpos = $（window）.scrollTop（）; 
 // $ （#header_left）。html（距离顶部距离：+ pos.top +< br />滚动位置：+ windowpos）; 
 if（windowpos> = pos.top）{ 
 s.addClass（stick）; 
} else {
 s.removeClass（stick）; 
} 
}）; 
} ）; 
  

CSS：

  #header {float：left;宽度：100％;身高：60px;背景：#fff; } 
 #header_left {float：left;显示：内联;宽度：650px; height：100px; } 
 #header_right {float：right;显示：内联;宽度：200px; height：100px; text-align：right; } 
 
 
 .stick {
 position：fixed; 
 top：0px; 
 / * _ top：expression（ie6 =（document.documentElement.scrollTop +px））; * / 
 z-index：1000; 
 
 $ / code> 

如果您将头部设置为固定位置，然后单击你可以看到下面的内容跳过了多于1次点击。

当你将一个元素设置为固定位置，它停止从文档中取出空间，因为它会像浮动一样。因此， DOM 的其余部分会跳起来，就像该元素突然被删除一样。

添加一个空的div，并在将 Position设置为Fixed 之前，用空格填充该div，或者分配更多空间让文档占据。

As you scroll down, the top bar goes up and the moment the top bar gets out of sight, the header gets set to position: fixed;. The moment this happens, the content below takes a massive jump upward with 1 scroll wheel click.

I'm assuming its probably something simple I'm overlooking, but wanted to check to see if someone else saw the issue. I've looked through it, but can't really see whats happening right off.

I've set up a jsfiddle to show this code in full.

http://jsfiddle.net/yZVjU/

$(document).ready(function() {
    var s = $("#header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

CSS:

#header { float: left; width: 100%; height: 60px; background: #fff; }
#header_left { float: left; display: inline; width: 650px; height: 100px; }
#header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }


.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}

If you get to the position where the header gets set to fixed, and click up and down, you'll see where the content below is jumping more than 1 click.

解决方案

When you set an element to Position Fixed, it stops taking space anymore from the document since it will be like-floating around. Therefore the rest of DOM will jump up as if that element was suddenly deleted.

Add an empty div and before you set Position to Fixed, fill in that div with empty space, or allocate more space for document to occupy.

这篇关于将div设置为position：固定在jquery上滚动导致下面的内容跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！