取消弹出jquery滚动事件
Debounce jquery scroll events
我只是有一个关于去抖动的一般问题。我在页面上的不同位置有三个菜单,当它们到达滚动窗口顶部85px的位置时,它们就会固定。当它们到达顶部时,它们被分层重叠。我目前每个都有一个功能,并希望尽可能优化。我的读数表明,offset.top的计算相当费力。
我的问题是:我是不是想得太多了?在这种情况下有必要退出吗?如果我的解释是正确的,三个偏移量的计算将在滚动中不断执行。有人能建议进行优化吗?或者解释一下为什么没有必要。
谢谢。
$(function(){
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop0-85) {
$('.fixed_heading_shop').css({position: 'fixed', top: '85px'});
$('.ghost_div0').css({display: 'block'});
} else {
$('.fixed_heading_shop').css({position: 'relative', top: '0px'});
$('.ghost_div0').css({display: 'none'});
}
});
});
$(function(){
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop1 = $('.fixed_heading_pricetable').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop1-85 ) {
$('.fixed_heading_pricetable').css({position: 'fixed', top: '85px'});
$('.ghost_div1').css({display: 'block'});
} else {
$('.fixed_heading_pricetable').css({position: 'relative', top: '0px'});
$('.ghost_div1').css({display: 'none'});
}
});
});
$(function(){
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop2 = $('.fixed_heading_layout').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop2-85) {
$('.fixed_heading_layout').css({position: 'fixed', top: '85px'});
$('.ghost_div2').css({display: 'block'});
} else {
$('.fixed_heading_layout').css({position: 'relative', top: '0px'});
$('.ghost_div2').css({display: 'none'});
}
});
});
对于这种情况,我认为这实际上是一个偏好问题。看看网站在你的特定情况下是如何回应的,如果你觉得用户体验受到了负面影响,就做出调整。我倾向于限制/取消滚动事件。
您可以做一些事情来加快滚动处理程序的速度(稍微)。例如,如果您可以使用id,就像jQuery的选择器优化指南中一样,例如$('#myElement')
很快,因为它使用document.getElementById
。
如果您担心性能,请进行更多的小调整:如果不需要调用,请不要进行任何调用来调整css。即,如果自上次启动滚动处理程序以来没有任何变化。(参见isFixed
布尔值)
$(function(){
var OFFSET = 85;
var WAIT = 10;
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;
var isFixed = false; // assuming that's the right default value
$(window).scroll(_.throttle(function(){
if($(window).scrollTop() > stickyHeaderTop0 - OFFSET) {
if(!isFixed) {
$('#fixed_heading_shop').css({position: 'fixed', top: OFFSET+'px'});
$('#ghost_div0').css({display: 'block'});
isFixed = true;
}
}
else {
if(isFixed) {
$('#fixed_heading_shop').css({position: 'relative', top: '0px'});
$('#ghost_div0').css({display: 'none'});
isFixed = false;
}
}
}, WAIT));
});
唯一重复的调用是$(window).scrollTop()
,如果您可以组合所有的滚动处理程序(3?),那么您只需要在每个[节流]滚动事件中进行一次调用。
在不更改HTML标记的情况下,您可以稍微优化您的代码:
$(function(){
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;
var stickyHeaderTop1 = $('.fixed_heading_pricetable').offset().top;
var stickyHeaderTop2 = $('.fixed_heading_layout').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop0-85) {
$('.fixed_heading_shop').css({position: 'fixed', top: '85px'});
$('.ghost_div0').css({display: 'block'});
} else {
$('.fixed_heading_shop').css({position: 'relative', top: '0px'});
$('.ghost_div0').css({display: 'none'});
}
if( $(window).scrollTop() > stickyHeaderTop1-85 ) {
$('.fixed_heading_pricetable').css({position: 'fixed', top: '85px'});
$('.ghost_div1').css({display: 'block'});
} else {
$('.fixed_heading_pricetable').css({position: 'relative', top: '0px'});
$('.ghost_div1').css({display: 'none'});
}
if( $(window).scrollTop() > stickyHeaderTop2-85) {
$('.fixed_heading_layout').css({position: 'fixed', top: '85px'});
$('.ghost_div2').css({display: 'block'});
} else {
$('.fixed_heading_layout').css({position: 'relative', top: '0px'});
$('.ghost_div2').css({display: 'none'});
}
});
});
如果你给if.else功能相同的三个元素一个公共类,那么它会得到更好的优化。我在JS中添加了一个类"common",你可以在html中添加它。
$(function(){
// add common class to elements
$('.fixed_heading_shop, .fixed_heading_pricetable, .fixed_heading_layout').addClass('common');
var elemArr = [];
// Check the initial Position of the fixed_nav_container
$('.common').each(function(index){
elemArr.push($(this).offset().top);
})
$(window).scroll(function(){
$('.common').each(function(index){
if( $(window).scrollTop() > elemArr[index]) {
$(this).css({position: 'fixed', top: '85px'});
$('.ghost_div'+index).css({display: 'block'});
} else {
$(this).css({position: 'relative', top: '0px'});
$('.ghost_div'+index).css({display: 'none'});
}
});
});
});
我想说,与其试图直接设置css,不如利用类。
.fixed_heading_shop,
.fixed_heading_pricetable {
position:relative;
top:0;
}
.ghost_div0,
.ghost_div1 {
display:block;
}
.scroll_trick .fixed_heading_shop,
.scroll_trick .fixed_heading_pricetable {
position:fixed;
top:85px;
}
.scroll_trick .ghost_div0,
.scroll_trick .ghost_div1 {
display:none;
}
$(function(){
var $window = $(window);
var $body = $('body');
var top = $('.fixed_heading_shop').offset().top-85;
$window.scroll(function(){
if( $window.scrollTop() > top) {
$body.addClass('scroll_trick');
} else {
$body.removeClass('scroll_trick');
}
});
});
相关文章:
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- jquery/ajax无限滚动事件
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- 如何用javascript调用函数,然后在滚动事件中调用该函数的特定实例
- 从父元素取消绑定滚动事件并绑定到子元素
- JavaScript/jQuery未触发滚动事件
- 如何使用javascript检测不可滚动元素中的滚动事件和方向
- AngularJS窗口滚动事件未触发
- 正在阻止滚动事件
- JavaScript 事件处理具有延迟的滚动事件
- 在画布上创建滚动事件
- 如何由于浏览器的平滑滚动而忽略大量滚动事件
- onclick滚动事件-语法
- 带有滚动事件的Javascript集翻译速度较慢
- 在firefox上的滚动事件中移动元素
- 鼠标滚轮事件和滚动事件相互冲突
- 滚动事件运行缓慢-有没有更轻松的方法