Прокрутка к якорю и установка nav fixed

Question

Я пытаюсь сделать навигацию с привязными связями фиксированной при прокрутке к якорю. Устранение пролома на якорь не проблема.

Проблема в том, что мой навигатор находится почти в нижней части экрана. Итак, что произойдет, если вы прокрутите вниз, навигация получит класс fixed. При нажатии на ссылку привязки скрипт прокручивается далеко до блока привязки. Я попытался компенсировать навигацию до высоты навигации. Это работает, но только когда вы нажимаете второй раз по одной и той же ссылке. Первый щелчок по ссылке привязки все еще делает ссылку слишком далеко!

Я создал скрипку, чтобы объяснить, что происходит ->Fiddle

Я лично считаю, что scrollTo и делает нав фиксированной в то же время мешая друг другу.

Кто-нибудь знает, что может вызвать это?

Что у меня есть это:

<div class="anchor-links"> 
    <div class="anchor-wrapper"> 
     <ul class="nav-list"> 
      <li><a href="#description" class="goSmoothly">Product information</a></li> 
      <li><a href="#bundles" class="goSmoothly">Product bundles</a></li> 
      <li><a href="#reviews" class="goSmoothly">Reviews</a></li> 
      <li><a href="#related" class="goSmoothly">Related products</a></li> 
     </ul> 
    </div> 
</div> 

<div id="description" class="block">description</div> 
<div id="bundles" class="block">bundles</div> 
<div id="reviews" class="block">reviews</div> 
<div id="related" class="block">related</div> 

var fixmeTop = $('.anchor-links').offset().top; 

$(window).scroll(function() { 
    var currentScroll = $(window).scrollTop(); 
    if (currentScroll >= fixmeTop){ 
     $('.anchor-links').addClass("sticky"); 
    } else { 
     $('.anchor-links').removeClass("sticky"); 
    } 
}); 

$('.goSmoothly').click(function(event){  
    event.preventDefault(); 
    $(this).addClass('active'); 
    $('html,body').animate({ 
     scrollTop: $(this.hash).offset().top - 100 
    }, 500); 
}); 

Answer 1

Попробуйте это.

var fixmeTop = $('.anchor-links').offset().top; 
 

 
$(window).scroll(function() { 
 
    var currentScroll = $(window).scrollTop(); 
 
    if (currentScroll >= fixmeTop){ 
 
     $('.anchor-links').addClass("sticky"); 
 
    } else { 
 
     $('.anchor-links').removeClass("sticky"); 
 
    } 
 
}); 
 

 
$('.goSmoothly').click(function(event){ \t \t 
 
    event.preventDefault(); 
 
    $(this).addClass('active'); 
 
    if($('.anchor-links').hasClass("sticky")) { 
 
    $('html,body').animate({ 
 
     scrollTop: $(this.hash).offset().top - 100 
 
    }, 500); 
 
    } else { 
 
    $('html,body').animate({ 
 
     scrollTop: $(this.hash).offset().top - 220 
 
    }, 500);  
 
    } 
 
});

.block{ 
 
    height:700px; 
 
    background:#eee; 
 
} 
 
.anchor-links { 
 
    border-bottom: 1px solid #f5f5f5; 
 
    border-top: 1px solid #f5f5f5; 
 
    margin-bottom: 20px; 
 
} 
 
.anchor-links .nav-list li { 
 
    display: inline-block; 
 
    line-height: 4.2rem; 
 
} 
 
.anchor-links.sticky { 
 
    background: #fff none repeat scroll 0 0; 
 
    border-bottom: 1px solid #f5f5f5; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 99; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img width="400" height="400" alt="Adidas 2 Opties" itemprop="image" class="featured" data-original-url="http://static.webshopapp.com/shops/057743/files/029936946/adidas-2-opties.jpg" src="http://static.webshopapp.com/shops/057743/files/029936946/400x400x2/adidas-2-opties.jpg"> 
 
<div class="anchor-links"> 
 
    <div class="anchor-wrapper"> 
 
     <ul class="nav-list"> 
 
      <li><a href="#description" class="goSmoothly">Product information</a></li> 
 
      <li><a href="#bundles" class="goSmoothly">Product bundles</a></li> 
 
      <li><a href="#reviews" class="goSmoothly">Reviews</a></li> 
 
      <li><a href="#related" class="goSmoothly">Related products</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div id="description" class="block">description</div> 
 
<div id="bundles" class="block">bundles</div> 
 
<div id="reviews" class="block">reviews</div> 
 
<div id="related" class="block">related</div>

Теперь, на другой, вы можете сделать -220 динамическим размером с header до фиксации его меньше размера заголовка после фиксации.

Как я уже сказал в комментарии, факт, что вы удаляете заголовок с тела и фиксируете его, уменьшает прокрутку вверху каждого раздела.

У вас также есть возможность добавить местозаполнитель, когда заголовок исправлен, таким образом вы предотвратите беспорядок в математике.

Answer 2

Это похоже на работу: JSfiddle.

HTML:

<div class="anchor-links"> 
    <div class="anchor-wrapper"> 
     <ul class="nav-list"> 
      <li><a href="#description" class="goSmoothly">Product information</a></li> 
      <li><a href="#bundles" class="goSmoothly">Product bundles</a></li> 
      <li><a href="#reviews" class="goSmoothly">Reviews</a></li> 
      <li><a href="#related" class="goSmoothly">Related products</a></li> 
     </ul> 
    </div> 
</div> 
<div class="container"> 
<div id="description" class="block">description</div> 
<div id="bundles" class="block">bundles</div> 
<div id="reviews" class="block">reviews</div> 
<div id="related" class="block">related</div> 
</div> 

CSS:

.container { 
    margin-top: 100px; 
} 
.block{ 
    height:700px; 
    background:#eee; 
} 
.anchor-links { 
    border-bottom: 1px solid #f5f5f5; 
    border-top: 1px solid #f5f5f5; 
    margin-bottom: 20px; 
    position: fixed; 
    top:0; 
    left: 0; 
    background: #fff; 
    width: 100%; 
} 
.anchor-links .nav-list li { 
    display: inline-block; 
    line-height: 4.2rem; 
} 
.anchor-links.sticky { 
    background: #fff none repeat scroll 0 0; 
    border-bottom: 1px solid #f5f5f5; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 99; 
}