Voeg een klas als div is x aantal pixels van de top van de viewport

stemmen
1

Ik zou willen hebben is om een ​​klasse toe te voegen aan een div wanneer het bijvoorbeeld 100 pixels van de bovenkant van de viewport. Dus niet na scrollen 100px maar als het 100px onder de bovenkant van de viewport. Kan iemand me helpen met dit?

<script>
jQuery(function() {
    //caches a jQuery object containing the header element
    var header = jQuery('#v0');
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 2939) {
            header.addClass('fixed1');
 }

    else {
            header.removeClass('fixed1');
        }
    });
});
</script>
De vraag is gesteld op 24/10/2019 om 11:53
bron van user
In andere talen...                            


2 antwoorden

stemmen
0

Ik heb deze code om fix navigatiebalk gebruikt op naar boven op scroll evenement. U kunt deze code aan de div te repareren

$(document).ready(function() {

      $(window).scroll(function () { 
          console.log($(window).scrollTop())
        if ($(window).scrollTop() > 280) {
          $('#nav_bar').addClass('navbar-fixed');
        }
        if ($(window).scrollTop() < 281) {
          $('#nav_bar').removeClass('navbar-fixed');
        }
      });
    });

css

.navbar-fixed {
        top: 0;
        z-index: 100;
      position: fixed;
        width: 100%;
    }
antwoordde op 24/10/2019 om 12:11
bron van user

stemmen
0

Niet zeker of dit is precies wilt bereiken, maar hier is de code. Als de header is meer dan 100px uit de buurt van de top (wat niet erg gebruikelijk, want dan moet er iets op de top van de kop te zijn) van het venster, dan is de nieuwe klasse wordt toegevoegd aan de kop.

$(function() {  
  var $header = $('#v0');
  $(window).scroll(function () { 
    if ($header.offset().top - $(this).scrollTop() > 100) {
      $header.addClass('blabla');
    } else {
      $header.removeClass('blabla');
    }
  });
});

UPDATE: Afhankelijk van uw feedback, dit is de eerste oplossing die tot me opkwam. Ik denk dat dat het gedrag dat u nodig heeft. Hoop dat het werkt voor u:

$(function() {  
  var $header = $('header');
  var $video = $('#v0');
  var $videoContainer = $('.videoContainer');

  $(window).scroll(function () {
    // Here we check if video field touches the header, and add 'fixed' class
    if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
      $video.addClass('fixed')
    }
    // Since both video and header is fixed now I needed some other
    // element to check if we are again getting away from the header
    // (scrolling up again) That's why I added the $videoContainer element 
    // to be able to remove the 'fixed' class.
    if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
      $video.removeClass('fixed');
    }
  });
});

Bijgewerkt code: https://jsbin.com/foyoyus/6/edit?html,css,js,output

antwoordde op 24/10/2019 om 13:43
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more