Добавить/удалить класс с jquery на основе вертикального прокрутки?

Ответ 1

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

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

Fiddle

Кроме того, удалив класс clearHeader, вы удаляете position:fixed; из элемента, а также возможность повторного выбора его с помощью селектора $(".clearHeader"). Я бы предложил не удалять этот класс и добавить новый класс CSS поверх него для целей стиля.

И если вы хотите "reset" добавить класс, когда пользователи прокручивают резервные копии:

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

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

Fiddle

edit: Здесь версия кэширования селектора заголовков - лучшая производительность, поскольку он не будет запрашивать 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');
        }
    });
});

Fiddle

Ответ 2

Добавьте к нему некоторый эффект перехода:

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;
}

Ответ 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");
        }

    });

});

Работает Fine

Ответ 4

Предполагается ли это значение? if (scroll <= 500) { ... Это означает, что это происходит от 0 до 500, а не 500 и выше. В исходном посте вы сказали "после того, как пользователь немного прокручивается"

Ответ 5

В аналогичном случае я хотел избежать вызова всегда 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 );

Может быть, кто-то найдет это полезным.

Ответ 6

Для мобильных устройств Android $ (window).scroll(function() и $ (document).scroll(function() могут работать или не работать). Вместо этого используйте следующее.

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

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

Этот код работал для меня. Надеюсь, это поможет вам.

Ответ 7

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#myId').addClass('myClass');
    } else {
       $('#myId').removeClass('myClass');
    }
});

Ответ 8

Вот чистый пример JavaScript для обработки классов во время прокрутки.

Вы, вероятно, захотите ограничить обработку событий прокрутки, тем более что логика обработчика становится более сложной, в этом случае throttle из lodash lib пригодится.

И если вы занимаетесь спа, имейте в виду, что вам нужно очистить слушателей событий с помощью removeEventListener, если они не нужны (например, во время ловушки жизненного цикла onDestroy вашего компонента, например, destroyed() для Vue, или, возможно, возврата) функция ловушки useEffect для React).

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

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

// Use either onScroll or throttledOnScroll
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>