Переместить div, когда позиция прокрутки ниже, чем его верхнее свойство

https://jsfiddle.net/9o73880z/ - возможно, fiddle поможет понять, что я буду писать здесь: )

Я делаю фиксированное (но положение: абсолютное, потому что в итоге оно очень длинное и мне нужно его прокручивать :)) меню на моей странице.

Он расширяется при нажатии (V рядом с NAV). Он идет вместе с пользователем, когда он прокручивает страницу.

$(window).scroll(function() {
    var sctre = $(window).scrollTop();
    if(sctre >= 95) {
        if($(".trefl-nav-switch").hasClass("trefl-zwiniete")) {$(".trefl-head-top").css({"padding-top":"40px","top":sctre-41,"background":"#fff"});}
        if($(".trefl-nav-switch").hasClass("trefl-rozwiniete") && sctre < menu_top_pos) {$(".trefl-head-top").css({"padding-top":"40x","top":sctre-41,"background":"#fff"});}
    }
    if(sctre < 95) {
        $(".trefl-head-top").css({"padding-top":"0px","top":"75px"});
    }
});

Когда позиция прокрутки превышает 95, она идет с пользователем (значение только для совместимости страниц, над которой я работаю), НО только когда кнопка навигации свернута (hasClass('zwiniete')). Когда он развернут (hasclass(rozwiniete)) он останавливается, поэтому пользователь может прокручивать меню, а не саму страницу).

А теперь мой вопрос, которого я действительно не знаю, как достичь:

  1. Can I somehow force browser to scroll only what's inside "trefl-head-top" when it is unfolded
    1. If I can't after looking at my code, I've tried to do something like - Record position(top property) of trefl-head-top when I click to unfold it (var menu_top_pos), and IF menu is unfolded AND scroll position is < smaller than menu_top_pos, change the "top" css. But unfortunately I can't see the effect :(

if($(".trefl-nav-switch").hasClass("trefl-rozwiniete") && sctre < menu_top_pos) {$(".trefl-head-top").css({"padding-top":"40x","top":sctre-41,"background":"#fff"});}

Это код ответственный.

Буду признателен за любую помощь, спасибо :)


menu scroll jquery
person zel    schedule 21.11.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы открываете меню, измените его положение css на фиксированное и добавьте прокрутку overflow-y с максимальной высотой меню, это вызовет прокрутку меню, как только оно достигнет указанной высоты:

if ($(".trefl-nav-switch").hasClass("trefl-zwiniete")) {
  ...

  $(".trefl-head-top").css("position",'fixed');
  $(".trefl-head-top").css("overflow-y",'scroll');
  $(".trefl-head-top").css("max-height",'100px');
  $(".trefl-head-top").css("top",'0px');
  ...
}

Вам нужно будет установить $(".trefl-head-top").css("position",'absolute');, когда он будет закрыт, а также сбросить остальные свойства. Возможно, вам придется повозиться с верхним свойством, чтобы правильно расположить его, но вы уже делаете подобное в своем коде.

person mike_t    schedule 21.11.2017
comment
max-height может быть проблемой, так как на меньших разрешениях некоторая позиция будет переноситься с одной на две строки. - person zel; 21.11.2017
comment
вам решать, как вы решите, когда запускать прокрутку переполнения - вы можете рассчитать ее динамически на основе области просмотра или суммировать высоту элементов меню, которые вы хотите видеть, например - person mike_t; 21.11.2017
comment
спасибо @mike_t за помощь. Это было довольно очевидно с самого начала, я думаю, что где-то видел, что мой div должен иметь position:absolute, чтобы прокручивать этот div. Теперь я могу иметь полноэкранную навигацию и прокручивать только ее. - person zel; 23.11.2017