2012-07-05 98 views
0

我正在试图在滚动到某个位置时获取subnav。但是当它到达那个位置时,它下面的一切都会上移。不能弄清楚它是什么。可能非常简单,我只是没有看到它。感谢您的帮助滚动时固定的元素

CSS

#subnav ul{ 
list-style: none; 
} 
#subnav a:visited{ 
color: #000; 
text-decoration: none; 
} 
#subnav a{ 
color: #000; 
text-decoration: none; 
} 
#subnav.fixed{ 
position:fixed; 
top:0; 
} 
.main { 
-webkit-border-top-right-radius:10px; 
-webkit-border-top-left-radius:10px; 
-moz-border-radius-topleft:10px; 
-moz-border-radius-topright:10px; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
min-height: 500px; 
height: auto; 
width: 700px; 
-moz-box-shadow: -1px 1px 1px 1px #ccc; 
-webkit-box-shadow: -1px 1px 1px 1px #ccc; 
box-shadow:   -1px 1px 1px 1px #ccc; 
float: none; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
z-index:1000; 
    position: relative; 
font-size: 12px; 
background-color: #FFF; 
background-position: left top; 
padding-top: 15px; 
padding-right: 15px; 
padding-bottom: 15px; 
padding-left: 15px; 
margin-bottom: -200px; 
} 

HTML

<div id="subnav"> 
     <ul> 
      content 
     </ul> 
    </div> 

    <div class="main"> 
     <div class="imageholder"> 
      content 
     </div> 

     <div class="text"> 
      content 
     </div> 
    </div> 

$(document).ready(function() { 
var top = $('#subnav').offset().top - parseFloat($('#subnav').css('marginTop').replace(/auto/, 0)); 
$(window).scroll(function (event) { 
// what the y position of the scroll is 
var y = $(this).scrollTop(); 

// whether that's below the form 
if (y >= top) { 
    // if so, ad the fixed class 
    $('#subnav').addClass('fixed'); 
} else { 
    // otherwise remove it 
    $('#subnav').removeClass('fixed'); 
} 
}); 
}); 
+0

你是说当滚动条从“静态”定位到“固定”定位时,内容似乎'跳跃'了吗? – jackwanders 2012-07-05 13:35:10

+0

您需要为底部的对接设置一个自定义类,至少这就是我正在使用的类,如果它不在顶部并且不固定,请添加此边距并使其停靠页脚。 – Alexandre 2012-07-05 13:51:38

回答

1

我知道这个问题一年半前被问过,但我的情况下,回答反正它可以帮助别人的未来...

我最近遇到了同样的问题在现场工作时。就像丹尼尔说的那样,它会跳跃起来,因为你正在从流程中删除#subnav,这就是设置“固定”位置的原因。它本质上是做同样的事情,就好像你要完全删除你的#subnav元素:跳起来填补空白。

为了解决这个问题,当滚动到固定点时,我创建了一个具有所有相同尺寸,填充,边距等的新div,以便在修复#subnav时实质上“填充”。您可以通过以下几种方式来完成这项工作:使用添加/删除“固定”类时显示/隐藏的不同ID创建重复的隐藏div,或者使用JS动态创建一个。无论您在此选择何种解决方案,都可以避免跳跃问题。

例子:

$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 

    if (y >= top) { 
     $('#subnav').addClass('fixed') 
     .after("<div id='filler'></div>"); // Add the new "filler" div 

     // Make the height, width, padding-top, padding-bottom, margin-top, and 
     // margin-bottom the same as the #subnav 
     $('#filler') 
      .css("height", $('#subnav').css("height")) 
      .css("width", $('#subnav').css("width")); // etc 

    } else { 
     $('#subnav').removeClass('fixed'); 

     // Remove the filler 
     $('#filler').remove(); // Or you can hide and show it again as needed 
    } 
}); 

希望这有助于。干杯!

2

休息,因为你正在服用的#subnav了直列流的上升。