Jquery Scrollspy在最后几个元素中无法正常工作
我试图使用Scrollspy突出显示导航栏元素 HTML: JS: 我已经创建了，但是它在那里工作得很好，但是在我的本地主机上，只有前两个选项卡被正确地突出显示。只要我滚动到“公文包”，它就开始突出显示最后一个元素 有人能帮忙吗？ 谢谢Jquery Scrollspy在最后几个元素中无法正常工作,jquery,twitter-bootstrap,scrollspy,Jquery,Twitter Bootstrap,Scrollspy,我试图使用Scrollspy突出显示导航栏元素 HTML: JS: 我已经创建了，但是它在那里工作得很好，但是在我的本地主机上，只有前两个选项卡被正确地突出显示。只要我滚动到“公文包”，它就开始突出显示最后一个元素 有人能帮忙吗？ 谢谢 <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-fixed-top navbar-default"> &l
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#benchmark">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hover_img">
<a class="navbar-brand" href="#page-top" >Ashraf Tech<img src="img/logo.png" alt="image" height="50px" /></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="benchmark" >
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li data-toggle="collapse" data-target="#benchmark.in">
<a class="active page-scroll" class="page-scroll" href="#home">Home<span class="sr-only">(current)</span></a>
</li>
<li data-toggle="collapse" data-target="#benchmark.in">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li data-toggle="collapse" data-target="#benchmark.in">
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#services" class="page-scroll" >Our Services</a>
</li>
<li data-toggle="collapse" data-target="#benchmark.in">
<a class="page-scroll" href="#contact">Contact Us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div>
<section id="home">
<div class="container homecontainer">
<div class="panel">
<h2>
Ashraf Technologies
<span><p>We are here to boost your buisnees. You may be startups or an old player in industry we well enhance your image to attract more customers.</p></span>
</h2>
<div id="buttton"> <a href="#about" class="btn btn-default page-scroll">Tell Me More</a></div>
</div>
</div><!--end of panel -->
</section>
<section id="about">
<div class="container about">
<div class="panel abt">
<h2>About us</h2>
<ul>
<li>
Vision
<p> Ashraf Tech Vision Ashraf Tech VisionAshraf Tech VisionAshraf Tech Vision Ashraf Tech Vision Ashraf Tech Vision Ashraf Tech Vision </p>
</li>
<li>
Mission<p>Ashraf Tech Mission Ashraf Tech Mission Ashraf Tech Mission Ashraf Tech Mission Ashraf Tech MissionAshraf Tech MissionAshraf Tech Mission sdfsdfsdfs its end</p>
</li>
</ul>
</div><!--panel end-->
</div>
</section>
<section id="portfolio">
<div class="container">
<h2>Our Proud Customers</h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/client.jpg">
<h4> <a href="http://prajbuilders.com/">client 1</a></h4>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="img/client.jpg">
<h4> <a href="http://prajbuilders.com/">client 2</a> </h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/client.jpg">
<h4> <a href="http://prajbuilders.com/">client 3</a></h4>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="img/client.jpg">
<h4> <a href="http://prajbuilders.com/">client 4</a></h4>
</div>
</div>
</div><!--end of row-->
</div>
</section>
<section id="services">
<div class="container">
<div id="service1">
<div class="row" >
<div class="panel service"><h2>Web and Mobile</h2>
<ul>
<li><span>Web Design and Developmemnt</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>Android and iOS applications</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>Website Redesign</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
</ul>
</div>
</div>
</div>
<div id="service2">
<div class="row" >
<div class="panel service"><h2>Digital Marketing</h2>
<ul>
<li><span>Facebook Page and social media advertizing</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>Web Marketing</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>SEO</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
</ul>
</div>
</div>
</div>
<div id="service3">
<div class="row" >
<div class="panel service"><h2>Enterprise Solutions</h2>
<ul>
<li><span>eCommerce Solutions</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>.Net Development></span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
<li><span>Java Development</span></li><p><span>Lorem Ipsum sdsadf Jwer mn JHGWAMFN</span></p>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="panel contactinfo">
<div class="row">
<div class="col-lg-5">
<div class=" thumbnail mapdisplay" id="map-canvas" style="min-height:50%; max-height:70%; min-width:50%;">
</div>
</div>
<div class="col-lg-5 contact">
<h2>Contact Information</h2>
<ul>
<li> Office contact</li><p>abc,asdasdasd asdasd 234324 </p>
<li>contact number</li><p>21341234, 234234324 </p>
<li>email</li><p>asdasf asfasf</p>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel contactus">
<div id="formSubmitted"></div>
<div id="formdiv">
<h2>Have a question? Write Us </h2>
<form class="myform" action="formsave.php" method="post" enctype="multipart/form-data" id="form1" onSubmit="document.getElementById('formdiv').style.display = 'none';" name="form1" >
<div class="row form-group">
<label for="name" class="col-sm-2"> Name </label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Name" name="Name" placeholder="Please Enter Your Name" required>
</div>
</div>
<div class="row form-group">
<label for="email" class="col-sm-2"> Email Id </label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" name="email" placeholder="Please Enter Email Id" required>
</div>
</div>
<div class="row form-group">
<label for="Cnumber" class="col-sm-2" > Contact Number </label>
<div class="col-sm-6">
<input type="text" class="form-control" id="cnumber" name="Cnumber" placeholder="Contact Number(+XX XXXXXXXXXX)" required>
</div>
</div>
<div class="row form-group">
<label for="msg" class="col-sm-2"> Message </label>
<div class="col-sm-6">
<textarea id="msg" name="msg" class="form-control" rows="2" cols="40" placeholder="Whats Your Message" required></textarea>
<span id="counter"></span>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="btnSubmit" name="btnSubmit" value="Submit">Submit</button>
</div>
</div>
</form>
</div>
<div class="container">
<div class="addthis_sharing_toolbox"></div>
</div>
</div><!--End of panel -->
</div><!--End of row -->
</div>
</section>
</div>
</body>
@charset "utf-8";
body{
position:relative;
background-image:url(../img/background-fnl.jpg);
background-position:center;
background-size:cover;
}
.homecontainer{
background-image:url(../img/home.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
padding:10px;
margin-top:15px;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
height:100%;
}
.navbar {
min-height: 65px;
}
.panel {
margin:20px;
margin-top:40px !important;
background-color: #348AB4;
color:#FFF;
border-color: #FFEAFF;
border-width:medium;
text-align:center;
border-image:url(../img/border-img.jpg)1 1 1 1 space repeat;
}
.abt{
background-image:url(../img/backgrnd-abt.jpg) !important;
}
.panel h2 {
text-align:center;
font-family: "modern_no._20regular";
}
.panel h2 span{
font-size: large;
color:#FCF8A3;
font-family:"myriadPro-Regular";}
.logo{
font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
}
.hover_img a img {
display:none;
}
.hover_img a:hover img {
display:inline;
}
.about {
background-image:url(../img/backgrnd-abt.jpg);
}
.about h2 {
font-style:italic;
font-weight: bolder;
color:#FFF;
margin:30px;
}
.about li {
text-align:justify;
font-weight:bold;
color:#FFF;
margin:30px;
}
.about li p {
font-style:oblique;
font-weight:normal;
margin:30px;
color:#FFC;
}
#services{
overflow-y:scroll;
}
#service1{
background-color:#FFF;
margin-top:25px;
background-image:url(../img/service1.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
padding:10px;
}
#service2{
background-color:#FFF;
margin-top:25px;
background-image:url(../img/service2.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
padding:10px;
}
#service3{
background-color:#FFF;
margin-top:25px;
background-image:url(../img/service3-fnl.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
padding:10px;
}
.service{
background-color:transparent;
color:#003;
text-align:left;
border: none;
border-image:none;
}
.service h2{
text-align:justify;}
.service li{
text-align:justify;
}
.service span{
background-color: #FFF;
}
.contactinfo{
background-image:url(../img/contact-bck.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
color:#009;
text-align: center;
}
.contact{
float:right;
}
.mapdisplay{
height:40%;
}
.contactus{
background-color:#FFF;
margin-top:25px;
background-image:url(../img/contact.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
padding:10px;
}
.contactus h2{
color:#003;
text-align:center;}
.myform{
margin-left:15%;
margin-right:15%;
text-align:center;
color:#000;
}
@media (max-device-width:320px){
.container {
width: 320px !important;
overflow:scroll;
}
.btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.homecontainer{
background-image:url(../img/home-mob.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#service1{
background-image:url(../img/service1-ver.jpg);
width: 320px !important;
background-size:contain;
}
#service2{
background-image:url(../img/service2.jpg);
width: 320px !important;
background-size:contain;
}
#service3{
background-image:url(../img/service3-fnl.jpg);
width: 320px !important;
background-size:contain;
}
.contactus{
color:#FFF;
background-image:url(../img/backgrnd-abt.jpg) !important;
}
.contactus h2{
color:#FFF;
text-align:center;}
.myform{
margin:10px;
text-align:center;
color:#FFF;
}
}
@media (max-device-width: 450px){
.container {
width: 360px !important;
overflow:scroll;
}
.homecontainer{
background-image:url(../img/home-mob.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#service1{
margin-top:25px;
background-image:url(../img/service1-ver-tab.jpg);
width: 360px !important;
background-size:contain;
}
#service2{
margin-top:25px;
background-image:url(../img/service2.jpg);
width: 360px !important;
background-size:contain;
}
#service3{
margin-top:25px;
background-image:url(../img/service3-fnl.jpg);
width: 360px !important;
background-size:contain;
}
.contactus{
color:#FFF;
background-image:url(../img/backgrnd-abt.jpg) !important;
}
.contactus h2{
color:#FFF;
text-align:center;}
.myform{
margin:20px;
text-align:center;
color:#FFF;
}
}
@media (max-device-width: 450px) and (orientation: landscape) {
.container {
width: 360px;
overflow:scroll;
}
.homecontainer{
background-image:url(../img/home-hor.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
.btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
#service1{
margin-top:25px;
background-image:url(../img/service1.jpg);
width: 360px !important;
background-size:contain;
}
#service2{
margin-top:25px;
background-image:url(../img/service2.jpg);
width: 360px !important;
background-size:contain;
}#service3{
margin-top:25px;
background-image:url(../img/service3-fnl.jpg);
width: 360px !important;
background-size:contain;
}
.contactus{
color:#FFF;
background-image:url(../img/backgrnd-abt.jpg) !important;
}
.contactus h2{
color:#FFF;
text-align:center;}
.myform{
margin:20px;
text-align:center;
color:#FFF;
}
}
@media (max-device-width: 640px){
.container {
width: 560px;
overflow:scroll;
}
.homecontainer{
background-image:url(../img/home-mob.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
#service1{
background-image:url(../img/service1-ver-tab.jpg);
background-size:contain;
}
#service2{
background-image:url(../img/service2.jpg);
background-size:contain;
}
#service3{
background-image:url(../img/service3-fnl.jpg);
background-size:contain;
}
.contactus{
color:#FFF;
background-image:url(../img/backgrnd-abt.jpg) !important;
}
.contactus h2{
color:#FFF;
text-align:center;}
.myform{
margin:20px;
text-align:center;
color:#FFF;
}
}
@media (max-device-width: 640px) and (min-device-width: 400px)and (orientation: landscape) {
.container {
width: 500px;
}
.homecontainer{
background-image:url(../img/home-hor.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#service1{
background-image:url(../img/service1.jpg);
background-size:contain;
}
#service2{
margin-top:30px;
background-image:url(../img/service2.jpg);
background-size:contain;
}
#service3{
margin-top:30px;
background-image:url(../img/service3-fnl.jpg);
background-size:contain;
}
}
@media (min-width: 641px) and (orientation: landscape) {
.container {
width: 680px;
}
.homecontainer{
background-image:url(../img/home-hor.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
}
@media (min-width: 641px) {
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#service1{
background-image:url(../img/service1-ver.jpg);
background-size:contain;
}
#service2{
background-image:url(../img/service2.jpg);
background-size:contain;
}
#service3{
background-image:url(../img/service3-fnl.jpg);
background-size:contain;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#service1{
background-image:url(../img/service1-ver-tab.jpg);
background-size:contain;
}
#service2{
background-image:url(../img/service2.jpg);
background-size:contain;
}
#service3{
background-image:url(../img/service3-fnl.jpg);
background-size:contain;
}
}
@media (min-width: 992px) {
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
}
@media (min-width: 1200px) {
.container {
width: 1200px;
}
.homecontainer{
background-image:url(../img/home-hor.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#service1{
background-image:url(../img/service1.jpg);
background-size:contain;
}
#service2{
background-image:url(../img/service2.jpg);
background-size:contain;
}
#service3{
background-image:url(../img/service3-fnl.jpg);
background-size:contain;
}
}
@media (min-width: 1700px) {
.container {
width: 1770px;
}
.btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
}
.sr1 {
background-color:#000;
color: #FFF;
font-size:36px;
}
.sr2 {
background-color:#00F;
color:#FF0;
font-size:36px;
}
.navbar-default {
background-color: #090d6d;
border-color: #3a44b2;
}
.navbar-default .navbar-brand {
color: #f3f5f6;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #d6c0ee;
}
.navbar-default .navbar-text {
color: #f3f5f6;
}
.navbar-default .navbar-nav > li > a {
color: #f3f5f6;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #d6c0ee;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #090d6d;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #f3f5f6;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #d6c0ee;
background-color: #3a44b2;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #3a44b2;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #d6c0ee;
background-color: #3a44b2;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #d6c0ee;
background-color: #3a44b2;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #d6c0ee;
background-color: #3a44b2;
}
.navbar-default .navbar-toggle {
border-color: #3a44b2;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #3a44b2;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #f3f5f6;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #f3f5f6;
}
.navbar-default .navbar-link {
color: #f3f5f6;
}
.navbar-default .navbar-link:hover {
color: #d6c0ee;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #f3f5f6;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #d6c0ee;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #d6c0ee;
background-color: #3a44b2;
}
}
jQuery(document).ready(function() {
setTimeout(updateScrollSpy, 1000);
});
function updateScrollSpy() {
jQuery('[data-spy="scroll"]').each(function () {
var $spy = jQuery(this).scrollspy('refresh')
});
}
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top-20
}, 1700, 'easeInOutExpo');
event.preventDefault();
});
});
// Highlight the top nav as scrolling occurs
$('#page-top').scrollspy({
target: '#benchmark'
})
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});