0
Вот скрипка моего проекта, немного проще. Но вы можете видеть, что он настроен правильно и не будет работать вообще, он ничего не делает.Bootstrap scroll spy не работает ни с реализацией javascript, ни с контентом <body>
https://jsfiddle.net/ybarpz3x/8/
Я пытался отладить это в течение 3-х дней, и я просто .... Я просто не могу, это просто не работает, когда он должен. Я включил jquery, bootstraps js и bootstraps css, очевидно, я создал свой собственный .active класс, и я попытался сделать <body data-spy="scroll" .. > и реализацию javascript, которая находится на jsfiddle.
Пожалуйста, помогите, спасибо.
$(document).ready(function(){
// Cache selectors
var lastId,
topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
var navHeight = $("#navmenu").outerHeight(true) ;
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+navHeight;
var navCollapse = 450;
if (fromTop > navCollapse) {
$("nav li").addClass("top-menu-collapsed")
};
if (fromTop <= navCollapse) {
$("nav li").removeClass("top-menu-collapsed")
};
});
// Add scrollspy to <body>
});
$('window').load(function(){
$('body').scrollspy({target: '#navmenu', offset: navHeight});
});@import "https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900&subset=latin-ext";
.no-side-padding {
padding-right: 0;
padding-left: 0;
}
body {
position: relative; }
nav {
text-align: right;
position: fixed;
background-color: #fff;
width: 100vw;
z-index: 999999;
}
nav ul {
font-size: 0px;
padding: 0;
margin: 0;
width: auto;
color: #337ab7;
}
nav ul .active {
box-shadow: 0px 4px 0px #36B8C8;
}
nav ul .active a {
color: #204E76;
}
nav ul .top-menu-collapsed {
padding: 20px 24px;
}
nav ul * {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
nav ul li {
display: inline-block;
font-family: "Raleway", sans-serif;
text-decoration: none;
font-size: 1.6rem;
text-transform: capitalize;
font-weight: 600;
position: relative;
padding: 30px 24px;
}
nav ul li a {
position: static;
z-index: 555555;
}
nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:visited {
text-decoration: none;
}
nav ul li div {
position: absolute;
top: 0;
left: 0;
z-index: 666666;
width: auto;
height: auto;
margin: 22 24;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
}
nav ul li:hover, nav ul li:active {
cursor: hand;
box-shadow: 0px 4px 0px #36B8C8;
}
nav ul li:hover a, nav ul li:active a {
color: #204E76;
}
nav ul li.active:after {
box-shadow: 0px 4px 0px #36B8C8;
}
nav ul li.active:after a {
color: #204E76;
}
.colour-options {
color: #36B8C8;
color: #337ab7;
}
#options #chair-finishes-gallery ul {
position: relative;
}
#options #chair-finishes-gallery ul li {
text-align: center;
width: 31%;
display: inline-block;
position: relative;
padding: 3%;
}
#options #chair-finishes-gallery ul li img {
max-width: 100%;
position: relative;
}
#options #chair-finishes-gallery span {
display: none;
padding-top: 45%;
padding-left: 2%;
font-family: sans-serif, inherit;
}
#options #big-list ul {
list-style-type: none;
columns: 5;
-webkit-columns: 5;
-moz-columns: 5;
padding: 0;
}
#options #big-list ul li * {
display: inline-block;
text-align: left;
font-size: 10px;
}
#options #big-list ul #li-img {
width: 150px;
height: 28px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 995px) {
#options #big-list ul {
list-style-type: none;
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
padding: 0;
}
}
@media (max-width: 800px) {
#options #big-list ul {
list-style-type: none;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
padding: 0;
}
}
#about1, #about2, #about3 {
padding: 300px 100px;
}
}
/*# sourceMappingURL=ncss.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav id="thatnav">
<ul id="navmenu" >
<li><a href="#about1"><i style="padding-right: 5px;" class="fa fa-home"></i>Home</a><div></div></li>
<li><a href="#about2">Ordering</a><div></div></li>
<li><a href="#about3" target="_blank">Designs</a><div></div></li>
<li><a href="#hotels-resorts" target="_blank">Hotels/Resorts</a><div></div></li>
</ul>
</nav>
<section style="background: rgba(50,50,50,1)" id="about1">
<div class="container-fluid">
<div class="row row-centered">
<div style="color: #fff;" class="col-lg-8 col-centered">
<h3 class="custom-h2">..now, about your Leisure</h3>
<p class="custom-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros.
</p>
</div>
</div>
</div>
</section>
<section style="background: rgba(50,50,50,1)" id="about2">
<div class="container-fluid">
<div class="row row-centered">
<div style="color: #fff;" class="col-lg-8 col-centered">
<h3 class="custom-h2">..now, about your Leisure</h3>
<p class="custom-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros.
</p>
</div>
</div>
</div>
</section>
<section style="background: rgba(50,50,50,1)" id="about3">
<div class="container-fluid">
<div class="row row-centered">
<div style="color: #fff;" class="col-lg-8 col-centered">
<h3 class="custom-h2">..now, about your Leisure</h3>
<p class="custom-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros.
</p>
</div>
</div>
</div>
</section>
oh, поэтому вам действительно нужно использовать их .nav класс, ох. Хорошо, что это отстой, я сделал свой nav самостоятельно и добавил загрузочный станок. Большое спасибо :) – lopu