首頁猿問添加/刪除基于垂直滾動的jQuery類？

添加/刪除基于垂直滾動的jQuery類？

JQuery JavaScript

慕勒3428872 2019-11-08 14:32:20

因此，基本上，我想在用戶向下滾動并添加另一個類以更改外觀后從“標題”中刪除該類。試圖找出最簡單的方法，但我無法使其正常工作。$(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;}的HTML<header class="clearHeader"> </header><div class="wrapper"> </div>我確定我在做一些非常基本的錯誤。

查看完整描述

3 回答

守候你守候我

TA貢獻1802條經驗獲得超10個贊

$(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');

}

});

反對回復 2019-11-08

DIEA

TA貢獻1820條經驗獲得超3個贊

它是我的代碼

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");

}

});

反對回復 2019-11-08

3 回答
0 關注
728 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

添加/刪除基于垂直滾動的jQuery類？

添加/刪除基于垂直滾動的jQuery類？

3 回答

添加回答