Adăugați o clasă atunci când div este pixeli x cantitate de sus a viewport

voturi
1

Aș dori să aibă este de a adăuga o clasă la un div, atunci când acesta este, de exemplu, 100 de pixeli din partea de sus a ferestrei de vizualizare. Deci, nu după defilare 100px, dar când este 100px sub partea de sus a ferestrei de vizualizare. Poate cineva să mă ajute cu asta?

<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>
Întrebat 24/10/2019 la 11:53
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
0

Am folosit acest cod de bare pentru a fixa nav pe partea de sus la evenimentul de derulare. Puteți acest cod pentru a rezolva div

$(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%;
    }
Publicat 24/10/2019 la 12:11
sursa de către utilizator

voturi
0

Nu sunt sigur dacă acest lucru este exact pe care doriți să realizeze, dar aici e codul. Dacă antetul este mai mare de 100px departe de partea de sus (care nu este foarte obișnuit pentru că atunci nu ar trebui să fie ceva pe partea de sus a antetului) a ferestrei, apoi noua clasă se adaugă antetul.

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

UPDATE: În funcție de feedback-ul dvs., aceasta este prima soluție care a venit în minte. Cred că e comportamentul care aveți nevoie. Speranța care funcționează pentru tine:

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

Cod Actualizat: https://jsbin.com/foyoyus/6/edit?html,css,js,output

Publicat 24/10/2019 la 13:43
sursa de către utilizator

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