Bootstrap Navbar Logo＆amp;滚动后菜单CSS类会发生变化

时间：2017-09-01 16:07:53

标签： javascript jquery html css twitter-bootstrap

如何在滚动后更改Bootstrap 3中的Navbar-Brand Image和Menu类？

我的js技能太低了，我也不知道在将logo__web__dark.png滚动到 $(window).scroll(function() { if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ { $('.sticky-navbar').addClass('sticky'); } else { $('.sticky-navbar').removeClass('sticky'); } });和导航栏菜单类之后如何更改。

提前谢谢！

.sticky-navbar {
    background-color: rgba(0, 0, 0, 0);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
    background-color: rgba(0, 0, 0, 0.46);
    height: 105px;
    transition: background-color .5s ease 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">                     
<body>   	

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
  <div class="container-fluid custom-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <i class="fa fa-bars" aria-hidden="true"></i>
    
  </button>
      <a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right custom-pull">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#1">Work</a></li>
        <li><a href="#2">Services</a></li> 
        <li><a href="#3">Contact Us</a></li> 
      </ul>
    </div>
  </div>
</div>

<section class="demo">
    <div class="container">
        <div class="row">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.

Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.

Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.

In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.

Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.

Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
            </div>
        </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>
Rigidbody2D

2 个答案:

答案 0 :(得分：2)

您可以添加第二个徽标，该徽标应在导航栏具有.sticky类时显示，并根据该类隐藏/显示图像

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
    } else {
        $('.sticky-navbar').removeClass('sticky');
    }
});
.sticky-navbar {
    background-color: rgba(0, 0, 0, 0);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
    background-color: rgba(0, 0, 0, 0.46);
    height: 105px;
    transition: background-color .5s ease 0s;
}

.sticky-navbar .sticky-logo,
.sticky-navbar.sticky .main-logo
{
  display: none;
}
.sticky-navbar.sticky .sticky-logo{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">                     
<body>   	

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
  <div class="container-fluid custom-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <i class="fa fa-bars" aria-hidden="true"></i>
    
  </button>
      <a class="navbar-brand main-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 1</a>
      <a class="navbar-brand sticky-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 2</a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right custom-pull">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#1">Work</a></li>
        <li><a href="#2">Services</a></li> 
        <li><a href="#3">Contact Us</a></li> 
      </ul>
    </div>
  </div>
</div>

<section class="demo">
    <div class="container">
        <div class="row">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.

Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.

Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.

In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.

Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.

Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
            </div>
        </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

答案 1 :(得分：1)

因为滚动事件会引发更多时间，您可以将代码更改为：

$(window).scroll(function() {
    var scrolltop = $(this).scrollTop();
    var sticky = $('.sticky-navbar.sticky').length;
    if (scrolltop > 50 && sticky == 0) {
        $('.sticky-navbar').addClass('sticky')
                .find('.navbar-brand img').attr('src', 'logo__web__dark.png');
        return;
    }
    if (scrolltop <= 50 && sticky != 0) {
        $('.sticky-navbar').removeClass('sticky')
                .find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
    }
});

通过这种方式，您将在每个条件下仅切换一次类和图像源：

scrolltop > 50


$(window).scroll(function() {
    var scrolltop = $(this).scrollTop();
    var sticky = $('.sticky-navbar.sticky').length;
    if (scrolltop > 50 && sticky == 0) {
        $('.sticky-navbar').addClass('sticky')
                .find('.navbar-brand img').attr('src', 'logo__web__dark.png');
        console.log('changed on > 50');
        return;
    }
    if (scrolltop <= 50 && sticky != 0) {
        $('.sticky-navbar').removeClass('sticky')
                .find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
        console.log('changed on <= 50');
    }
});
.sticky-navbar {
    background-color: rgba(0, 0, 0, 0);
    /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
    background-color: rgba(0, 0, 0, 0.46);
    height: 105px;
    transition: background-color .5s ease 0s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
    <div class="container-fluid custom-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-bars" aria-hidden="true"></i>

            </button>
            <a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
        </div>
        <div class="collapse navbar-collapse" id="navMain">
            <ul class="nav navbar-nav pull-right custom-pull">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#1">Work</a></li>
                <li><a href="#2">Services</a></li>
                <li><a href="#3">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>

<section class="demo">
    <div class="container">
        <div class="row">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.

                Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.

                Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.

                In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.

                Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.

                Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
        </div>
    </div>
</section>

相关问题
最新问题