使用基于垂直滚动的 jquery 添加/删除类？

因此，基本上我想删除后，用户向下滚动一点点类的头部，并添加另一个类，以改变它的外观。

我在想最简单的方法，但是我做不到。

$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$(".clearheader").removeClass("clearHeader").addClass("darkHeader");
}
}

CSS

.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}


.darkHeader { height: 100px; }


.wrapper {
height:2000px;
}

超文本标示语言

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

我肯定我做了一些很基本的错事。

461519 次浏览
小开

这个价值是有目的的吗？这意味着它发生在0到500之间，而不是500以上。在最初的帖子中你说 “当用户向下滚动一点”

小开
最佳答案 
$(window).scroll(function() {
var scroll = $(window).scrollTop();


//>=, not <=
if (scroll >= 500) {
//clearHeader, not clearheader - caps H
$(".clearHeader").addClass("darkHeader");
}
}); //missing );

小提琴

此外，通过删除 clearHeader类，您将从元素中删除 position:fixed;，并且可以通过 $(".clearHeader")选择器重新选择它。我建议不要删除这个类，而是在其上面添加一个新的 CSS 类以达到样式化的目的。

如果你想在用户回滚时“重置”新增的类:

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


if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});

小提琴

编辑: 这个版本缓存了头选择器——性能更好，因为它不会在你每次滚动时查询 DOM，你可以安全地删除/添加任何类到头元素而不会丢失引用:

$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();


if (scroll >= 500) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});

小提琴

小开

如果你喜欢，可以添加一些过渡效果:

Http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader {
height:50px;
background:lightblue;
position:fixed;
top:0;
left:0;
width:100%;


-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;
}


.clearHeader.darkHeader {
background:#000;
}
小开

这是我的原则

jQuery(document).ready(function(e) {
var WindowHeight = jQuery(window).height();


var load_element = 0;


//position of element
var scroll_position = jQuery('.product-bottom').offset().top;


var screen_height = jQuery(window).height();
var activation_offset = 0;
var max_scroll_height = jQuery('body').height() + screen_height;


var scroll_activation_point = scroll_position - (screen_height * activation_offset);


jQuery(window).on('scroll', function(e) {


var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > scroll_activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;


if (element_in_view || has_reached_bottom_of_page) {
jQuery('.product-bottom').addClass("change");
} else {
jQuery('.product-bottom').removeClass("change");
}


});


});

没问题

小开

对于 Android 手机来说，$(窗口)。捲动(function ()和 $(document)。捲动(function ()可能工作，也可能不工作。

jQuery(document.body).scroll(function() {
var scroll = jQuery(document.body).scrollTop();


if (scroll >= 300) {
//alert();
header.addClass("sticky");
} else {
header.removeClass('sticky');
}
});

这个代码对我很有用，希望对你有帮助。

小开

在类似的情况下，由于性能问题，我希望避免总是调用 addClass 或 RemoveClass。我已经将滚动处理程序函数分为两个单独的函数，根据当前状态使用。我还根据本文添加了一个 deounce 功能: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

        var $header = jQuery( ".clearHeader" );
var appScroll = appScrollForward;
var appScrollPosition = 0;
var scheduledAnimationFrame = false;


function appScrollReverse() {
scheduledAnimationFrame = false;
if ( appScrollPosition > 500 )
return;
$header.removeClass( "darkHeader" );
appScroll = appScrollForward;
}


function appScrollForward() {
scheduledAnimationFrame = false;
if ( appScrollPosition < 500 )
return;
$header.addClass( "darkHeader" );
appScroll = appScrollReverse;
}


function appScrollHandler() {
appScrollPosition = window.pageYOffset;
if ( scheduledAnimationFrame )
return;
scheduledAnimationFrame = true;
requestAnimationFrame( appScroll );
}


jQuery( window ).scroll( appScrollHandler );

也许有人觉得这很有用。

小开

纯 javascript

下面是在滚动过程中处理类的仅使用 javascript 的示例。

const navbar = document.getElementById('navbar')


// OnScroll event handler
const onScroll = () => {


// Get scroll value
const scroll = document.documentElement.scrollTop


// If scroll value is more than 0 - add class
if (scroll > 0) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled")
}
}


// Use the function
window.addEventListener('scroll', onScroll)
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
background-color: #89d0f7;
box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
transition: box-shadow 500ms;
}


#navbar.scrolled {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}


#content {
height: 3000px;
margin-top: 60px;
}
<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>

一些改进

您可能希望控制滚动事件的处理，因为处理程序逻辑变得更加复杂，在这种情况下，lodash库中的 throttle就派上用场了。

如果你正在做 spa，请记住，一旦不需要事件侦听器，你需要使用 removeEventListener来清除它们(例如在组件的 onDestroy生命周期挂钩期间，比如 destroyed() for Vue，或者返回 useEffect hook for React 的功能)。

例如用 loash 节流:

    // Throttling onScroll handler at 100ms with lodash
const throttledOnScroll = _.throttle(onScroll, 100, {})


// Use
window.addEventListener('scroll', throttledOnScroll)
小开

这是基于@shahzad-yousuf 的回答，但我只需要在用户向下滚动时压缩菜单。我使用参考点的顶部容器滚动“关闭屏幕”启动“挤压”

  <script type="text/javascript">
$(document).ready(function (e) {
//position of element
var scroll_position = $('div.mainContainer').offset().top;
var scroll_activation_point = scroll_position;
$(window).on('scroll', function (e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = scroll_activation_point < y_scroll_pos;
if (element_in_view) {
$('body').addClass("toolbar-compressed ");
$('div.toolbar').addClass("toolbar-compressed ");
} else {
$('body').removeClass("toolbar-compressed ");
$('div.toolbar').removeClass("toolbar-compressed ");
}
});


});   </script>

提交答案