div görünümün üst x miktarı piksel olan bir sınıf ekleme

oy
1

Ben istiyorum o zaman görünümün üst kısmının, örneğin, bir div 100 piksel bir sınıf eklemektir. Yani değil 100px kaydırma ancak görünümün üst altına 100px olduğunda sonra. Herkes bana bu konuda yardımcı olabilir misiniz?

<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>
Oluştur 24/10/2019 saat 11:53
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
0

Ben kaydırma olayı üstüne üzerine düzeltme gezinme çubuğunda bu kodu kullandık. Bu kod div düzeltmek için olabilir

$(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%;
    }
Cevap 24/10/2019 saat 12:11
kaynak kullanıcı

oy
0

Emin değil bu tam olarak ulaşmak istediğiniz, ama burada kod ise. başlık pencerenin (o başlığı üstünde bir şey olması gerekir, çünkü çok olağan değildir) üstten fazla 100px sonraysa, ardından yeni sınıf başlığına eklenir.

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

GÜNCELLEME: Geribildiriminiz bağlı olarak bu aklıma gelen ilk çözümdür. O İhtiyacınız davranış olduğunu düşünüyorum. sizin için çalışan Umut:

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

Güncelleme kod: https://jsbin.com/foyoyus/6/edit?html,css,js,output

Cevap 24/10/2019 saat 13:43
kaynak kullanıcı

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