세로 스크롤을 기반으로 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;
}
HTML
<header class="clearHeader"> </header>
<div class="wrapper"> </div>
나는 아주 기본적인 잘못을하고 있다고 확신합니다.
$(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");
}
});
});
잘 작동
이 값이 의도 된 것입니까? if (scroll <= 500) { ...
이것은 500 이상이 아닌 0에서 500까지 발생한다는 것을 의미합니다. 원래 게시물에서 "사용자가 약간 아래로 스크롤 한 후" 라고 말했습니다.
In a similar case, I wanted to avoid always calling addClass or removeClass due to performance issues. I've split the scroll handler function into two individual functions, used according to the current state. I also added a debounce functionality according to this article: 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 );
Maybe someone finds this helpful.
For Android mobile $(window).scroll(function() and $(document).scroll(function() may or may not work. So instead use the following.
jQuery(document.body).scroll(function() {
var scroll = jQuery(document.body).scrollTop();
if (scroll >= 300) {
//alert();
header.addClass("sticky");
} else {
header.removeClass('sticky');
}
});
This code worked for me. Hope it will help you.
참고URL : https://stackoverflow.com/questions/12558311/add-remove-class-with-jquery-based-on-vertical-scroll
'Programing' 카테고리의 다른 글
Android AsyncTaskLoader가 loadInBackground를 시작하지 않습니까? (0) | 2020.12.03 |
---|---|
Mountain Lion RVM 설치 1.8.7 x11 오류 (0) | 2020.12.03 |
Try-catch-finally-return 설명 (0) | 2020.12.03 |
C에서 포인터를 캐스팅하는 규칙은 무엇입니까? (0) | 2020.12.03 |
Android에서 올바른 크기로 비트 맵 디코딩 (0) | 2020.12.02 |