Как закрепить блок div при скроле?

Question

[test]

Все привет ,у меня такой вопрос .На сайте у меня меню фиксированное ,75px высотой .Так же есть блок div ,который при при достижении своей верхней границей нижней границы меню,должен в таком положении и остаться

Answer 1

[boga-net]

хорошо бы увидеть код. Скиньте его в песочницу. Ну а так, с помощью jQuery, что-то типа :

$(window).on('scroll', function(){
     var scr = $(this).scrollTop();
     
    var elem = $('div');
    var elemOffset = $('div').offset().top;

     // Условие
     if ( elemOffset == 75 )) {
            elem.addClass('fixed');
     }
            
     if (scr > 75) {
            elem.removeClass('fixed');
     } 
});

// Где fixed - класс, который фиксирует ваше меню где-то там, где верхняя граница нижней границы

.fixed {
    position: fixed;
    left: (ваше значение)
    top: 75px;
}

Хотя, Знаете, без вашего кода и грамотно сформулированного вопроса, сложно что-то подсказать.

Comments

[test]

var src задаем и нигде не используем? Да вопрос в том ,как сделать так ,что бы блок получал класс fixed ,как бы "упираясь" в меню ,и зависал под ним .Код какой нужен для этого?обычный блок div высотой 50px и блок nav высотой 75px .остальное не играет роли

[boga-net]

HelmutKampfe, да я var scr на автомате написал. Им надо считать высоту скролла. Я вдали от компа, пишу с телефона, поэтому только теория. Вам нужно высчитать расстояние между блоком div и верхом экрана. За это отвечает offset().top у блока. Это повесить на событие scroll. И сделать условие :
Если у элемента высота относительно верха экрана равна 75рх, то задаём класс fixed
Сейчас попробую подредактировать свой комментарий выше

Answer 2

[Максим Тимофеев]

Для этого давно с css плюшка есть
position: sticky;
demo: https://codepen.io/CSSKing/pen/yyMGPJ
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/p...
вот только надо юзать с префиксами и забыть про ie https://caniuse.com/#search=position%3A%20sticky

Comments

[boga-net]

Сначала посмотрите поддержку на caniuse, прежде, чем советовать

[Максим Тимофеев]

boga-net,

Сначала посмотрите поддержку на caniuse

я даже ссылку привел

Answer 3

[Ice]

leafo.net/sticky-kit
stickyjs.com