Как заставить элемент скрыться при определённом значения скролла вниз?

Question

[Alex_87]

Хочу получать новое значение нахождения элемента при каждом скролле. Но что-то не получается с этим кодом:

( function( $ ) {
    $(document).ready(function(){
        $(window).scroll(function(){
          var x = $(".lang-selector").offset();
          console.log(x);
        });
    });
} )( jQuery );

Получает значение только при загрузке, да к тому же, помимо top, выдаёт ещё и не нужный left:



И то, в самом начале, почему-то кидает в консоль object:

Comments

[Ankhena]

Узнавайте прокрутку страницы и вычитайте положение блока.
.offset() это положение относительно всего документа, а не окна.

[Alex_87]

Ankhena, сделал так. Что здесь не в порядке? Показывает ошибку:
55index.html:1063 Uncaught TypeError: Cannot set property 'display' of undefined

$(window).on("scroll", function() {
    if ($(window).scrollTop() > 850){
      $('.lang-selector').style.display = "none";
    } 
          
    });

[Ankhena]

Alex_87, $('.lang-selector').addClass("none");
И делаете соответствующий класс.

Ну либо .attr("style", "display:none");
или .css("display", "none")
или .hide() или его альтернативы.

Разумными являются первый и последний варианты (с классом и hide)

[Alex_87]

Ankhena, да, сработало, спасибо! А вы можете пояснить, почему возникала ошибка с display: none? Хочется понять!

[Ankhena]

Alex_87, потому что элементов может быть много. Если вам нужен первый их них, то $('.lang-selector')[0]
Если всем, то each.

Answer 1

[kocherman]

var x = $(".lang-selector")[0].getBoundingClientRect();
console.log(x.top, x.bottom);

Comments

[Alex_87]

а при этом коде он показывает ошибку

55index.html:1063 Uncaught TypeError: Cannot set property 'display' of undefined

$(window).on("scroll", function() {
    if ($(window).scrollTop() > 850){
      $('.lang-selector').style.display = "none";
    } 
  });

[kocherman]

Alex_87, Потому что не надо лезть в style.
$('.lang-selector').addClass('hidden');
В css
.hidden {display: none;}
А если лезешь в style - делай это правильно:
$('.lang-selector')[0].style.display = "none";
или
$('.lang-selector').css({display: "none"})

[kocherman]

Alex_87, надеюсь, понятно написал. А то читаю, как-то по еврейски написал

[Alex_87]

kocherman, вот спасибо! Как раз хотел спросить у вас о ошибке.
А зачем к $('.lang-selector') нужно писать [0] ?

[kocherman]

Alex_87, Та это гребанный jQuery. $('.lang-selector') - это массив элементов с классом lang-selector. А $('.lang-selector')[0] - это его первый элемент.
Потому в jQuery пишут вот так:
$('.lang-selector').css({ свойство: "значение" })

[kocherman]

Alex_87,
а можно еще вот так:
$('.lang-selector').css("свойство", "значение")