滚动粘头跳跃 [英] Scrolling sticky header jumping

问题描述

我正在创建一个头部，当用户向下滚动超过一定数量的像素时，头部会保持原位。我的标题高121像素，但我想要粘贴的标题部分是标题的底部42像素;它确实有效，但是在它开始粘贴的时候，页面跳跃了大约50个像素。

我认为可能导致问题的原因是 $（'＃header'）。css（{position：'fixed'}）; 。我认为一旦固定被应用于内容，内容 div 不再考虑保证金。我尝试过在不同的位置上玩耍，但没有任何解决方法。

我创建了一个 JSFIDDLE ，以更好地说明我的问题。

JQUERY CODE

$ b $

  $（window）.scroll（function（）
 {
 if（$（window）.scrollTop（） > 79）
 {
 $（'＃header'）。css（{position：'fixed'}）; 
} 
 else 
 {
 $（'＃header'）。css（{position：'static'，top：'-79px'}）; 
} 
}）; 
  

CSS代码

  body {
 margin：0; 
 padding：0; 
} 
 #header {
 width：100％; 
 height：121px; 
 background：url（http://libertyeaglearms.com/dev/admin/graphics/header-bg.png）; 
} 
 #content {
 margin：10px auto; 
 width：300px; 
 min-height：600px; 
} 
  

HTML $ b

 < div id =header> header< / div> 
< div id =content>内容转到此处< / div> 
  

解决方案

问题在于：

当标题具有静态定位时，它会将内容向下推，以免重叠。当定位从静态变为固定时，它不再在意它是否与内容重叠，因此内容跳转到页面的顶部，因为它认为它没有任何内容。

这个问题有多种解决方法：

最简单的一个可能是添加另一个基本占据空间的元素当定位发生变化时，头部就会做。

当头部为固定和无时，通过将元素的显示更改为块头是静态的

这是一个更新的JSFiddle： http：// jsfiddle .net / 6kPzW / 2 /

HTML代码：

 < div id =header> header< / div> 
< div id =header_placeholder>< / div> 
< div id =content>内容< / div> 
  

CSS代码：

  body {
 margin：0; 
 padding：0; 
} 
 #header {
 width：100％; 
 height：121px; 
 background：url（http://libertyeaglearms.com/dev/admin/graphics/header-bg.png）; 
} 
 #content {
 margin：10px auto; 
 width：300px; 
 min-height：600px; 
} 
 #header_placeholder {
 height：121px; 
宽度：100％; 
 display：none; 
 
  

JQuery代码：

$ b （$（window）.scrollTop（）> 79（
$ b

  $（window）.scroll（function（）
 {
） ）
 {
 $（'＃header'）。css（{position：'fixed'}）; 
 $（'＃header_placeholder'）。css（{display：'block'} ）; 
} 
 else 
 {
 $（'＃header'）。css（{position：'static'，top：'-79px'}）; 
 $（'＃header_placeholder'）。css（{display：'none'}）; 
} 
}）; 
  

I'm creating a header that'll stick in place when the user scrolls down past a set amount of pixels. My header is 121 pixels high, but the part of the header I want to stick is the bottom 42 pixels of the header; which does work, but at the point it begins to stick the page jumps up about 50 pixels.

My thought on what could be causing the issue is $('#header').css({position: 'fixed'});. I think once fixed is applied the content, the content div no longer takes the margin into account. I've tried to play around with the different positions, but nothing has worked out for me.

I created a JSFIDDLE to better illustrate my issue.

JQUERY CODE

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
    {
        $('#header').css({position: 'fixed'});
    } 
    else 
    {
        $('#header').css({position: 'static', top: '-79px'});
    }
});

CSS CODE

body {
    margin: 0;
    padding: 0;
}
#header {
    width: 100%;
    height: 121px;
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
}
#content {
    margin: 10px auto;
    width: 300px;
    min-height: 600px;
}

HTML

<div id="header">header</div>
<div id="content">content goes here</div>

解决方案

Here is the problem:

When the header has a "static" positioning, it pushes the content down so it does not overlap with it. When the positioning changes from "static" to "fixed", it no longer cares whether it overlaps with the content so the content "jumps up" to the top of the page because it thinks there is nothing in it's way.

There are multiple fixes to this problem:

The easiest one is probably to add another element that essentially takes up the space that the header did when the positioning changes.

I did this by changing the display of the element to "block" when the header is "fixed" and "none" when the header is "static"

Here is an updated JSFiddle: http://jsfiddle.net/6kPzW/2/

HTML Code:

<div id="header">header</div>
<div id="header_placeholder"></div>
<div id="content">Content</div>

CSS Code:

body {
    margin: 0;
    padding: 0;
}
#header {
    width: 100%;
    height: 121px;
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
}
#content {
    margin: 10px auto;
    width: 300px;
    min-height: 600px;
}
#header_placeholder {
    height:121px;
    width:100%;
    display:none;
}

JQuery Code:

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
{
        $('#header').css({position: 'fixed'});
        $('#header_placeholder').css({display: 'block'});
} 
else 
{
        $('#header').css({position: 'static', top: '-79px'});
        $('#header_placeholder').css({display: 'none'});
}
});

这篇关于滚动粘头跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！