Как сделать статическую панель навигации исчезающей при прокрутке - bootstrap

#jquery #twitter-bootstrap-3

Вопрос:

Я пытаюсь сделать панель навигации исчезающей и исправленной, когда пользователь прокручивает вниз. Я мог бы только сделать ее липкой, и это не то, что я ищу. Как я мог бы заставить ее исчезать в верхней части страницы при прокрутке?

Это то, что я сделал до сих пор

 $(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 110) {
            $('.navbar-light').addClass("fixed");
        } else {
            $('.navbar-light').removeClass("fixed");
        }
    });
});

https://jsfiddle.net/moerayan/DTcHh/25773/

В принципе, то, что я пытаюсь сделать, при прокрутке панель навигации должна исчезать, а не прилипать!

1. Я не понимаю, чего вы пытаетесь достичь. Если панель навигации всегда видна, как она может исчезнуть?

2. @RoryMcCrossan Я пытался скрыть это, а затем исчезнуть, но не тренировался. Вы можете игнорировать мой скрипт, если вы можете только просветить меня логикой, которую я должен использовать для достижения этой цели

3. @RoryMcCrossan В принципе, то, что я пытаюсь сделать, при прокрутке панель навигации должна исчезать, а не прилипать

4. Но если он не будет отображаться при прокрутке, он не будет виден на странице, когда произойдет исчезновение. До сих пор неясно, что вы пытаетесь сделать

Ответ №1:

То, что вы делаете в своей скрипке, просто делает панель навигации липкой.

Потому что я не могу догадаться, как вы html выглядите. И если вы используете какой-то плагин, я просто могу сказать это:

Вы не можете сделать это с помощью небольшого jquery

Сайт, на который вы указываете, использует этот плагин для достижения эффекта.

https://github.com/markgoodyear/headhesive.js/

И, конечно, связанные html с этим, чтобы заставить его работать.

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

https://markgoodyear.com/labs/headhesive/

Я надеюсь, что это вам поможет. 🙂