세로 스크롤 기반 jquery로 클래스 추가/제거?

세로 스크롤 기반 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');
        }
    });
});

피들

순자바스크립트

스크롤 중에 클래스를 처리하는 자바스크립트 전용 예제입니다.

//! Put the class name that you want to use
// Class name that will be added to the navbar element in the "scrolled" state
const SCROLLED_STATE_CLASS = "scrolled"

//! Use your own ID or selector
// The id of navigation bar HTML element
const NAVBAR_ID = "navbar"

// Get the navigation bar element
const navbar = document.getElementById(NAVBAR_ID)

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

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

  // If scroll value is more than 0 - means the page is scrolled, add or remove class based on that
  if (scroll > 0) {
    navbar.classList.add(SCROLLED_STATE_CLASS);
  } else {
    navbar.classList.remove(SCROLLED_STATE_CLASS)
  }
}

// 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>

몇 가지 개선 사항

처리기 논리가 복잡해질수록 스크롤 이벤트 처리를 제한하고 싶을 것입니다.throttle부터lodashlib은 도움이 됩니다.

스파를 하신다면, 이벤트 청취자분들께는 다음과 같은 이벤트를 받으셔야 한다는 사실을 명심하시기 바랍니다.removeEventListener그들이 필요하지 않을 때는 (예를 들어 도중에)onDestroy구성 요소의 라이프사이클 후크(life hook)destroyed()Vue의 경우 또는 반환 함수의useEffectRact)의 후크(Hook).

lodash를 사용한 조절 예제:

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

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

원하는 경우 전환 효과를 추가합니다.

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) { ...즉, 0에서 500까지 발생하며 500 이상은 발생하지 않습니다.원래 게시물에서 "사용자가 조금 아래로 스크롤한 후"라고 말했습니다.

안드로이드 모바일 $(윈도우)의 경우.스크롤(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를 부르는 것을 피하고 싶었습니다.스크롤 핸들러 기능을 현재 상태에 따라 사용하는 두 개의 개별 기능으로 나누었습니다.이 기사에 따라 디바운스 기능도 추가했습니다: 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 );

누군가가 도움이 된다고 생각할 수도 있습니다.

이것은 @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>

언급URL : https://stackoverflow.com/questions/12558311/add-remove-class-with-jquery-based-on-vertical-scroll