Эффект для автоматического изменения размера логотипа в меню

-3

Как я могу добиться изменения размера логотипа и перекрытия в меню при прокрутке вверх/вниз? Любой плагин или код Wordpress, который может это сделать?

Пример эффекта, который я хочу для изменения размера и перекрытия логотипа, - это 1) http://vespaadventures.com/ 2) https://www.coupondunia.in/

Спасибо и оцените всю помощь и совет.

  • 0
    Вам нужно использовать JavaScript. Я не думаю, что найдется плагин, который сделает это за вас, поскольку он обычно будет сильно отличаться от логотипа к логотипу. В javascript вам нужно будет использовать прослушиватель событий для захвата прокрутки, а затем добавить / удалить класс для элемента или родительского элемента, который вы изменяете, в зависимости от положения прокрутки.
  • 1
    Добро пожаловать в переполнение стека! Вопросы, требующие от нас предложить, найти или порекомендовать книгу, инструмент, библиотеку программного обеспечения, плагин, учебное пособие, объяснить методику или предоставить любой другой сторонний ресурс, не относятся к теме переполнения стека Переполнение стека
Показать ещё 1 комментарий
Теги:

1 ответ

0

Вы можете попробовать это

var getNav = $("nav.navbar");
if( getNav.hasClass("navbar-sticky")){
  $(window).on("scroll", function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >100){
      $(".navbar-sticky").addClass("navbar-fixed");
    }else {
      $(".navbar-sticky").removeClass("navbar-fixed");
    }
  });
}
body{
  height: 800px;
}
.navbar-sticky{
  -moz-transition: all .7s ease-in-out 0s;
  -webkit-transition: all .7s ease-in-out 0s;
  transition: all .7s ease-in-out 0s;
  }
.navbar-sticky{display:block !important;}
.navbar-fixed{
  position:fixed !important;
  top: 0;
  left: 0;
  width: 100%;
}
.navbar-fixed .navbar-brand img{
  height: 60px;
  }
<link href="/bootstrap.min.css" rel="stylesheet"/>
<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>


<nav class="navbar navbar-default navbar-sticky bootsnav" >

        <div class="container">         

            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#brand"><img src="http://vespaadventures.com/wp-content/uploads/2016/09/logo-website-va-011.png" class="logo" alt=""></a>
            </div>
            <!-- End Header Navigation -->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active scroll"><a href="#home">Home</a></li>
                    <li class="scroll"><a href="#about">About</a></li>
                    <li class="scroll"><a href="#portfolio">Portfolio</a></li>
                    <li class="scroll"><a href="#blog">Blog</a></li>
                    <li class="scroll"><a href="#contact">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>   
    </nav>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню