Προσθέστε μια τάξη, όταν div είναι το ποσό x pixels από τους κορυφαίους του παραθύρου προβολής

ψήφοι
1

Θα ήθελα να έχουν είναι να προσθέσετε μια τάξη σε ένα div όταν είναι, για παράδειγμα, 100 εικονοστοιχεία από την κορυφή του παραθύρου προβολής. Έτσι, όχι μετά την κύλιση 100px, αλλά όταν είναι 100px κάτω από την κορυφή του παραθύρου προβολής. Μπορεί κανείς να με βοηθήσει με αυτό;

<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>
Δημοσιεύθηκε 24/10/2019 στις 11:53
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
0

Έχω χρησιμοποιήσει αυτόν τον κώδικα στη γραμμή λύση πλοήγησης για να επάνω στην εκδήλωση κύλισης. Μπορείτε να αυτόν τον κώδικα για να καθορίσει το 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%;
    }
Απαντήθηκε 24/10/2019 στις 12:11
πηγή χρήστη

ψήφοι
0

Δεν είμαι σίγουρος αν αυτό είναι ακριβώς που θέλετε να επιτύχετε, αλλά εδώ είναι ο κώδικας. Αν η επικεφαλίδα είναι περισσότερο από 100px μακριά από την κορυφή (η οποία δεν είναι πολύ συνηθισμένο, γιατί τότε θα πρέπει να υπάρχει κάτι πάνω από το header) του παραθύρου, τότε η νέα κατηγορία προστίθεται στην κεφαλίδα.

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

UPDATE: Ανάλογα με τα σχόλιά σας, αυτή είναι η πρώτη λύση που ήρθε στο μυαλό μου. Νομίζω ότι είναι η συμπεριφορά που χρειάζεστε. Ελπίδα που δουλεύει για εσάς:

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

Ενημερώθηκε Κωδικός: https://jsbin.com/foyoyus/6/edit?html,css,js,output

Απαντήθηκε 24/10/2019 στις 13:43
πηγή χρήστη

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