Как сделать элемент фиксированным, когда 50px в верхней части экрана

Question

У меня есть элемент html div, который прокручивается со страницы, но я бы хотел, чтобы он стал фиксированным, когда он достиг 50px в верхней части экрана ...
Как это делается?
Мой идентификатор div #box
Спасибо!
-Ina

Answer 1

Если вы хотите, чтобы это было исправлено в верхней части страницы на некотором расстоянии от вершины, вы можете проверить верхнее смещение элемента и изменить класс, когда он достигнет желаемого расстояния.

Код jquery для вашей справки

jQuery(document).scroll(function() { 

     var documentTop = jQuery(document).scrollTop(); 
     console.log('this is current top of your document' + documentTop); 
     //box top is 891 
     if (documentTop > 841) { 
      //change the value of the css at this point 
      jQuery("#box").addClass("stayfix"); 
     } 
     else   
     { 
      jQuery("#box").removeClass("stayfix"); 
     } 

}); 

Необходимо уточнить, что вы сделали до сих пор. Например, как вы сделали элемент div для прокрутки внутри страницы. используя функции анимации css или js/jquery? Это поможет нам дать более конкретный ответ.

** Отредактировано Согласно вашей скрипке.

Answer 2

Попробуйте что-нибудь подобное. Это решение, использующее jquery (надеюсь, не проблема), которая проверяет scrollHeight страницы каждый раз, когда прокручивается страница. Если значение scrollHeight больше определенного порога, элемент становится фиксированным. Если нет, то элемент позиционируется относительно (но вы можете делать все, что вы хотите в этом случае.

$(document).ready(function() { 
    var navFixed = false; 
    var $box = $("#box"); 
    var topHeight = 50; 

    $(document).scroll(function() { 
    if ($(document).scrollTop() >= topHeight && !navFixed) { 
     $box.css("position", "fixed"); 
     navFixed = true; 
    } 
    else if ($(document).scrollTop() < topHeight && navFixed) { 
     $box.css("position", "relative"); 
     navFixed = false; 
    } 
    }); 
}); 

Вы должны написать некоторые дополнительные CSS, нацеленные на #box элемент, который говорит ему, что координаты вы хотите его привязаны к.

Answer 3

Они правы, этот вопрос повторяется. Вот код, который я сделал с ответами с форума.

var box_top = $("#box").offset().top; 
$(window).scroll(function (event) { 
    if ($(window).scrollTop() >= (box_top - 50)) { 
    $("#box").css({position:"fixed",top:"50px"}); 
    } else { 
    $("#box").css({position:"relative"}); 
    } 
}); 

Надеюсь, что это все равно.

https://jsfiddle.net/ay54msd5/1/