Есть лендинг с фиксированным хедером. Нужно чтобы в нем отображалась полоса прогресса скроллинга по странице, а именно по разделам. Как это осуществить?
Ответ
var
bar = $('#bar'),
$window = $(window),
docHeight = $(document).height(),
winHeight = $window.height(),
baseX = docHeight - winHeight;
$window.scroll(function(e) {
var x = ($window.scrollTop() / baseX) * 100;
bar.css({'width': + x + '%'});
});
body{
height:4000px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
a {
text-decoration: none;
}
ul li {
display: block;
float: left;
}
ul li a {
display: block;
padding: 1rem 2rem;
font-family: sans-serif;
}
.nav {
display: block;
width: 100%;
border-bottom: 2px solid #ccc;
position: relative;
position: fixed;
}
#bar{
position:absolute;
left: 0;
bottom: -2px;
background-color:red;
width: 0px;
height: 2px;
}
Вариант с якорями:
var
bar = $('#bar'),
$window = $(window),
docHeight = $(document).height(),
winHeight = $window.height(),
baseX = docHeight - winHeight;
var
lastId,
topNav = $(".nav"),
topNavHeight = topNav.outerHeight(),
link = topNav.find("a");
scrollItems = link.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
$window.scroll(function(e) {
var x = ($window.scrollTop() / baseX) * 100;
bar.css({'width': + x + '%'});
var fromTop = $(this).scrollTop()+topNavHeight;
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
link
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
body{
height:4000px;
padding-top: 5rem;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
a {
text-decoration: none;
}
ul li {
display: block;
float: left;
}
ul li a {
display: block;
padding: 1rem 2rem;
font-family: sans-serif;
}
.nav {
display: block;
width: 100%;
border-bottom: 2px solid #ccc;
position: relative;
position: fixed;
top: 0;
}
#bar{
position:absolute;
left: 0;
bottom: -2px;
background-color:red;
width: 0px;
height: 2px;
}
.box {
height: 20rem;
padding: 2rem;
line-height: 1.5rem;
}
.active a{
background: red;
color: #fff;
}
Комментариев нет:
Отправить комментарий