2015-06-15 1 views
1

У меня есть веб-страница, в которую вставлены сценарии jQuery «Scroll to id» и «Sticky menu» для них. Проблема заключается в первом нажатии на меню, когда я занимаю верхнюю позицию страницы. Его смещение от вершины отличается смещением после других кликов (когда я не наверху). Я написал образец кода. Если бы я не мог сказать, что имею в виду, я надеюсь, что вы сможете найти его в образце.
HTML:Прокрутите до id-скрипта, прокрутите окно до неправильного положения, если я использую липкое меню

<header> 
    <a href="#part1">Part1</a> 
    <a href="#part2">Part2</a> 
    <a href="#part3">Part3</a> 
    <a href="#part4">Part4</a> 
    <a href="#part5">Part5</a> 
    <a href="#part6">Part6</a> 
</header> 
<section id="part1" class="parts"><h1>Part 1</h1></section> 
<section id="part2" class="parts silver"><h1>Part 2</h1></section> 
<section id="part3" class="parts"><h1>Part 3</h1></section> 
<section id="part4" class="parts silver"><h1>Part 4</h1></section> 
<section id="part5" class="parts"><h1>Part 5</h1></section> 
<section id="part6" class="parts silver"><h1>Part 6</h1></section> 

CSS:

body { margin: 0 0 0 0 } 
.parts{ height: 200px; border: 1px gray solid } 
.silver { background : silver } 
header { background: yellow; height:50px; line-height: 50px; width:100% } 
.sticky { position: fixed; left: 0; top: 0; z-index: 2000; width:100% } 
h1 { text-align:right } 

JQuery:

// This section is given from http://stackoverflow.com/questions/5284814/jquery-scroll-to-div 
// Scroll to id script 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top - 50 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

// Sticky menu script 
var stickyNavTop = $('header').offset().top; 
var stickyNav = function(){ 
    var scrollTop = $(window).scrollTop();    
    if (scrollTop > stickyNavTop) { 
     $('header').addClass('sticky'); 
    } else { 
     $('header').removeClass('sticky'); 
    } 
}; 
stickyNav(); 
$(window).scroll(function() { 
    stickyNav(); 
}); 

jsFiddle

Пожалуйста, помогите мне решить эту проблему.

ответ

0

заменить условие

if (scrollTop > stickyNavTop) 

с

if (scrollTop >= stickyNavTop) 

включить первую часть в состоянии и добавить маржу-топ в этой части.

#part1 {margin-top:50px}