Question

如何在向上/向下滚动时在菜单上实现徽标大小调整和重叠？任何可以实现此目的的wordpress插件或代码？

我希望徽标调整大小的效果示例＆amp;重叠是 1）http://vespaadventures.com/ 2）https://www.coupondunia.in/

感谢并感谢所有的帮助和建议。

Answer 1

你可以试试这个

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/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>

徽标自动调整大小的效果在菜单上

1 个答案: