使用 jQuery 航点滚动时跳转标题
Jumping header on scroll using jQuery Waypoints
我在页面顶部固定了引导菜单,在视口底部有一个定位良好的滚动按钮.btn-naving(在 #home-slide中)。在(任何)滚动上,我希望固定菜单将背景从透明更改为半灰色,并且滚动按钮也消失。从现在开始,该按钮应该会一直隐藏,但是当我滚动到顶部时,我需要菜单再次变得透明。
为此,我正在使用jQuery Waypoints。我已经使用以下代码实现了这两种效果,但是当我滚动时,菜单会跳转,EDIT:更具体地说,它会闪烁,就好像菜单不是一直处于固定位置一样。当我滚动时,有时看起来好像菜单随着页面滚动,然后突然跳回到固定位置。有时一段时间后开始正常工作。如果我删除以下两行代码,它不会跳转,但我需要为两个事件使用相同的触发器。
编辑2:如果我不在菜单中使用航点,它也不会闪烁。滚动流畅,菜单始终位于页面中所有其他元素的顶部。
$("#home-slide .btn-navigate").removeClass("pulse animated");
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
.HTML:
<header id="masthead">
<nav class="navbar navbar-fixed-top">
<div class="container">
MENU CONTENT
</div>
</nav>
</header>
<section id="home-slide">
<div class="container">
<h1 class="heading">HEADING</h1>
<p class="font2">
TEXT</p>
<a href="#" class="btn-navigate animated pulse">Scroll Button</a>
</div>
</section>
j查询:
jQuery(document).ready(function ($) {
$(function () {
$("#masthead nav").waypoint(function () {
$("#masthead nav").toggleClass('scrolling');
$("#home-slide .btn-navigate").removeClass("pulse animated");
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
}, { offset: '-20px' });
});
});
我的导航 CSS:
#masthead {
nav {
min-height: 120px;
padding-top: 2.727rem;
background: rgba(51,58,64,0.0);
-webkit-transition: background-color 0.5s linear;
.container {
position: relative;
}
.navbar-nav {
a {
color: @lms-white;
font-weight: bold;
text-transform: none;
text-shadow: 1px 1px 2px rgba(50, 50, 50, 1);
padding: 7px 1.17rem;
border: 2px solid transparent;
.border-radius(5px);
&:hover {
background: transparent;
border: 2px solid @lms-pink;
}
}
}
.navbar-brand {
padding: 7px 15px;
}
&.scrolling {
background: rgba(51,58,64,0.9);
-webkit-transition: background-color 0.5s linear;
}
}
引导导航 CSS:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
知道如何解决这个问题吗?谢谢!
我已经找到了解决方案。闪烁不是由航点引起的。添加
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
导航解决了问题。
如调试指南中所述,使用固定位置元素作为航点可能会导致糟糕的时间。航点元素在文档中的位置(客户端offsetX/Y
)决定了它的触发位置,固定位置元素的偏移量在您滚动时会不断变化。
看起来你已经有一个非常好的静态定位元素,你可以使用而不是那个nav
,#masthead
本身。您可能还希望对代码进行一些更改,以查看用户在越过航点时滚动direction
。我相信,如果用户向上滚动,您希望撤消其中一些动画状态。
$("#masthead").waypoint(function (direction) {
$("#masthead nav").toggleClass('scrolling');
if (direction === 'down') {
$("#home-slide .btn-navigate").removeClass("pulse animated");
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
}
else {
$("#home-slide .btn-navigate").addClass("pulse animated");
$("#home-slide .btn-navigate").removeClass("fadeOutUp animated2");
}
}, { offset: -20 });
这可以使用 toggleClass 变体稍微减少一点,该变体将布尔值作为第二个参数,如果该布尔值true
则切换将添加类,如果是false
则删除类。
$("#masthead").waypoint(function (direction) {
$("#masthead nav").toggleClass('scrolling', direction === 'down');
$("#home-slide .btn-navigate")
.toggleClass("pulse animated", direction === 'up')
.toggleClass("fadeOutUp animated2", direction === 'down');
}
}, { offset: -20 });
- jQuery动画标题滚动
- 滚动定位时隐藏标题
- window.scrollTo()与Polymer Project核心滚动标题面板断开
- 当我向下滚动时,如何使Web中的标题仍然可用
- 使用 JS 在选项卡中滚动页面标题
- 向下滚动页面时在侧边栏中显示部分标题(也许使用 BS scrollspy?
- 滚动然后修复到 html 中的顶部标题
- 表在向下滚动时修复标题
- HTML--无法使标题在滚动时保持固定
- 动画标题在向上滚动时消失
- 滚动过标题后显示图像-尝试不起作用
- 核心滚动标题面板+jQuery滚动
- CSS,标题绝对,向下滚动
- WebView Html固定标题滚动表
- 当标题滚动到边界附近时,DataTables ColReorder滚动
- jQuery动画标题滚动
- 停止GridView标题滚动
- 在页面顶部显示标题-滚动事件重新触发问题
- 固定标题滚动问题
- 显示不同的标题滚动,然后隐藏它时,滚动到顶部的javascript/JQuery