Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Скроллинг через JavaScript (https://javascript.ru/forum/events/53282-skrolling-cherez-javascript.html)

Mikhail1989 28.01.2015 10:04

Скроллинг через JavaScript
 
Здравствуйте. Подскажите как можно решить следующую проблему.
Есть одностраничный сайт с вертикальной прокруткой.
При переходе по ссылкам идет скроллинг к нужному месту страницы и вот тут появляется проблема. Прокручивается все до нужного места как надо, но еще должен меняться цвет шапки, на цвет раздела к которому мы перешли и вот с этим проблема. Проблема в размерах блоков к которым мы переходим.
Вот видео, где все работает как надо.
http://youtu.be/ls9s8kx4pAg
Но я хочу уменьшить отступ после контента в разделе "Акции", и вот что тогда получается.
http://youtu.be/7pG649ccQjo
Вот скрипт который отвечает за прокрутку.
$(document).ready(function(){
                !function(){
            var map=[]
             ,names=[]
             ,win=$(window)
             ,header=$('header')
             ,currClass
            $('.content').each(function(n){
             map[n]=this.offsetTop
             names[n]=$(this).attr('id')
            })
            win
             .on('scroll',function(){
                var i=0
                while(map[i++]<=win.scrollTop());
                if(currClass!==names[i-2])
                currClass=names[i-2]
                header.removeAttr("class").addClass(names[i-2])
             })
            }(); });
                    function goToByScroll(id){
                $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
                }
                $(document).ready(function(){
                    $().UItoTop({ easingType: 'easeOutQuart' });
                });

рони 28.01.2015 10:58

Mikhail1989,
лучше живой макет в какой нибудь песочнице http://learn.javascript.ru/play


Часовой пояс GMT +3, время: 04:16.