Страницы

Поиск по вопросам

понедельник, 3 декабря 2018 г.

Прогресс скроллинга страницы. Как сделать?

Есть лендинг с фиксированным хедером. Нужно чтобы в нем отображалась полоса прогресса скроллинга по странице, а именно по разделам. Как это осуществить?


Ответ

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; }
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, excepturi.
2 Lorem ipsum dolor sit amet.
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, at debitis! Fuga, architecto, illum. Deleniti optio voluptatibus suscipit veniam, dicta.

Комментариев нет:

Отправить комментарий