Javascript 当滚动超过某个点时，jQuery捕捉/固定菜单宽度会发生更改和跳跃
当导航的top属性位于页面顶部时，我会将一个水平导航锁定在页面顶部。但是，当导航到达页面顶部时，它会增加其宽度，并且会跳跃。一旦我向下滚动一点，这种现象就会停止。请注意，在向上滚动时也会发生同样的情况。换句话说，当导航的顶部到达页面的顶部时，就会出现宽度变化跳跃的情况Javascript 当滚动超过某个点时，jQuery捕捉/固定菜单宽度会发生更改和跳跃,javascript,jquery,css,scroll,css-position,Javascript,Jquery,Css,Scroll,Css Position,当导航的top属性位于页面顶部时，我会将一个水平导航锁定在页面顶部。但是，当导航到达页面顶部时，它会增加其宽度，并且会跳跃。一旦我向下滚动一点，这种现象就会停止。请注意，在向上滚动时也会发生同样的情况。换句话说，当导航的顶部到达页面的顶部时，就会出现宽度变化跳跃的情况 <div id="container"> <div class="phone-number"> ... </div> <div id="phone-sub-
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
跳跃性是卷轴事件失败中高度变化的典型案例。使导航条处于
位置：固定的滚动时，会使该元素脱离正常文档流，降低文档的高度，从而将文档向后滚动，将导航条踢回正常位置。你一直都在滚动，所以循环会反复运行，导致跳跃。修复相当简单：插入一个占位符，当导航栏被修复时，该占位符将填充该空间
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
HTML:
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
JavaScript:
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
$(window).scroll(function() {
if ($(this).scrollTop() > topOfNav){
$('#nav-bar-placeholder').show();
$('#float-nav-bar').addClass('fixed');
}
else
{
$('#nav-bar-placeholder').hide();
$('#float-nav-bar').removeClass('fixed');
}
});
查看此JSFIDLE以了解完整的工作示例：。跳跃是滚动事件崩溃中高度变化的典型案例。使导航条处于位置：固定的滚动时，会使该元素脱离正常文档流，降低文档的高度，从而将文档向后滚动，将导航条踢回正常位置。你一直都在滚动，所以循环会反复运行，导致跳跃。修复相当简单：插入一个占位符，当导航栏被修复时，该占位符将填充该空间
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
HTML:
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
JavaScript:
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>
$(window).scroll(function() {
if ($(this).scrollTop() > topOfNav){
$('#nav-bar-placeholder').show();
$('#float-nav-bar').addClass('fixed');
}
else
{
$('#nav-bar-placeholder').hide();
$('#float-nav-bar').removeClass('fixed');
}
});
查看此JSFiddle以获取完整的工作示例：。能否尝试为浮动导航条设置固定宽度，如宽度：250px而不是使用%
？或者您需要使用%
？我希望它从其父容器继承。这并不能解决我的紧张情绪，这对我来说更为紧迫。我对宽度有一些“修正”，但我想看看首先修正跳跃性的地方。你能试着为#浮动导航条设置一个固定的宽度吗，比如宽度：250px而不是使用%
？或者您需要使用%
？我希望它从其父容器继承。这并不能解决我的紧张情绪，这对我来说更为紧迫。我有一些“修复”宽度的东西，但我想看看修复跳跃的东西首先带我去哪里。范。该死的。好吃！谢谢你，好心的先生。有没有办法让class.float导航条的高度为inherit（或类似）？我不想明确地设置高度，但如果必须这样做，那就这样吧。我自然而然地尝试了inherit，但这是不可能的。@Gregolopolis您可能可以将导航栏和占位符都包装在容器div中，并让它们都继承。祝你好运！扇子。该死的。好吃！谢谢你，好心的先生。有没有办法让class.float导航条的高度为inherit（或类似）？我不想明确地设置高度，但如果必须这样做，那就这样吧。我自然而然地尝试了inherit，但这是不可能的。@Gregolopolis您可能可以将导航栏和占位符都包装在容器div中，并让它们都继承。祝你好运！
<div id="container">
<div class="phone-number">
...
</div>
<div id="phone-sub-text">
...
</div>
<div id="social-media">
<div>
<img id="fb-icon" src="img/fb-rect.jpg"/>
<img src="img/twitter-rect.jpg"/>
</div>
</div>
<h1>
...
</h1>
<div id="float-nav-bar"></div>
<div id="main">
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-top" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#" />
</figure>
</div>
<header>
...
</header>
<header class="sub-header">
...
</header>
<div id="main-content-bottom" class="main-content">
<section>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
<br/>
...
</section>
<figure>
<img src="#">
</figure>
</div>
</div>
<footer class="container-footer">
</footer>
</div>
</body>
</html>