Div становится фиксированным после прокрутки при заданном количестве пикселей сверху, также только больше, чем заданная ширина окна, плюс добавляется border-bottom - PullRequest
Новая
       51

Div становится фиксированным после прокрутки при заданном количестве пикселей сверху, также только больше, чем заданная ширина окна, плюс добавляется border-bottom

0 голосов
/ 22 мая 2018

Я использую скрипт (ниже), который позволяет прокручивать div (навигация), но как только он попадает в верхнюю часть браузера, он становится фиксированным.Я хочу, чтобы div стал фиксированным в 50 пикселях от верхней части окна, что делает скрипт, но сначала он должен достичь самой вершины, а затем спрыгнуть вниз.

Я бы хотел, чтобы он остановился и стал фиксированным50 пикселей ДО того, как он действительно достигнет вершины. 

<script type="text/javascript">
var fixmeTop = $('.navPages-container').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if ((currentScroll >= fixmeTop) && ($(window).width() > 800))  {
        $('.navPages-container').css({
            position: 'fixed',
            top: '52px',
            height: '50px',
            left: '0'
        });
    } else {
        $('.navPages-container').css({
            position: 'static',
            top: '0'
        });
    }
});
</script>

Теперь я нашел другой скрипт, который делает именно это (ниже), однако я хочу объединить оба скрипта, чтобы эта функциональность возникала только тогда, когда окно браузераширина> (больше) 800 (см. первый скрипт).

Кроме того, как только div становится фиксированным, появляется нижняя граница: border-bottom: 1px solid # 000 (я понимаю, что тире не разрешены).

<script type="text/javascript">
var fixed = false;
$(document).scroll(function() {
    if( $(this).scrollTop() >= 118 ) {
        if( !fixed ) {
            fixed = true;
            $('.navPages-container').css({
               position:'fixed',
               top:50
            });
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.navPages-container').css({
               position:'static'
            });
    }
}
});
</script>

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 22 мая 2018

Вы можете попробовать это.Я только что добавил условное утверждение относительно ширины от первого сценария ко второму сценарию.Также добавлена ​​черная граница в инструкцию CSS, которая возникает при выполнении условий 

<script type="text/javascript">
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 118 && ($(window).width() > 800) ) {
    if( !fixed ) {
        fixed = true;
        $('.navPages-container').css({
           position:'fixed',
           top:50,

        });
 $('.navPages-container').css('border-bottom','1px solid #000');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.navPages-container').css({
           position:'static'
        });
 $('.navPages-container').css('border-bottom','0px');
    }
}
});
</script>
...