jQuery Scroll-Animation zu einer bestimmten Position

Question

Ich versuche, eine Scroll-Animation zu einem bestimmten Ort zu machen, wenn auf die Navbar Themen geklickt wird. Die Animation funktioniert, aber wenn Sie auf ein bestimmtes Thema klicken, scrollt die Navigationsleiste nach unten und positioniert sich entweder ein wenig hoch oder ein wenig tief vom Bild, aber nicht genau darüber. Wie löst man dieses Problem?

sind Meine Codes unter:

$(document).ready(function() { 
 
    var navpos = $('#navi').offset().top; 
 
    console.log(navpos.top); 
 
    var footer_postion = $('#footie').offset().top; 
 
    $(window).bind('scroll', function() { 
 
    if ($(window).scrollTop() > navpos && $(window).scrollTop() < footer_postion) { 
 
     $('#navi').addClass('fixed'); 
 
    } else { 
 
     $('#navi').removeClass('fixed'); 
 
    } 
 

 
    }); 
 

 

 
    var shp = $('.nav').height(); 
 

 

 
    $('a[href^="#"]').on('click', function(event) { 
 
    var target = $(this.getAttribute('href')); 
 
    if (target.length) { 
 
     event.preventDefault(); 
 
     $('html, body').stop().animate({ 
 
     scrollTop: target.offset().top - shp 
 
     }, 1000); 
 
    } 
 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.container { 
 
    background-color: rgba(225, 226, 228, 0.62); 
 
    height: 76px; 
 
} 
 

 
h1 { 
 
    font-family: 'Zilla Slab', serif; 
 
    color: rgba(58, 58, 54, 0.52); 
 
    text-align: center; 
 
    padding-top: 17px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.nav-placeholder { 
 
    background-color: rgba(112, 121, 130, 0.62); 
 
    height: 25px; 
 
    width: 1349px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    margin-right: 17px; 
 
    margin-top: 2px; 
 
} 
 

 
li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-family: 'Zilla Slab', serif; 
 
} 
 

 
.img { 
 
    background-color: aliceblue; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding-top: 25px; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    color: aliceblue; 
 
} 
 

 
footer.container { 
 
    height: 900px; 
 
    background-color: rgba(225, 226, 228, 0.62); 
 
} 
 

 
h1.end { 
 
    font-family: 'Zilla Slab', serif; 
 
    color: rgba(58, 58, 54, 0.52); 
 
    text-align: center; 
 
    padding-top: 207px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" id="Home"> 
 
    <h1>Photo Webshop</h1> 
 
</div> 
 

 
<div class="nav-placeholder" id="navi"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li><a href="#Home">Home</a></li> 
 
     <li> <a href="#Photos">Street Art</a></li> 
 
     <li> <a href="#Veggies">Veggies</a></li> 
 
     <li> <a href="#Berries">Berries</a></li> 
 
     <li> <a href="#Dog">Dog</a></li> 
 
     <li> <a href="#Beach">Beach</a></li> 
 

 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div id="Berries" class="img"> 
 

 
    <img src="images/berries.png"> 
 

 
</div> 
 

 
<div id="Veggies" class="img"> 
 

 
    <img src="images/tomato.png"> 
 

 
</div> 
 

 
<div id="Photos" class="img"> 
 

 
    <img src="images/sleeper.png"> 
 

 
</div> 
 

 
<div id="Dog" class="img"> 
 

 
    <img src="images/dog.png"> 
 

 
</div> 
 

 
<div class="img"> 
 

 
    <img src="images/ladyfinger.png"> 
 
</div> 
 

 
<div id="Beach" class="img"> 
 

 
    <img src="images/footie.png"> 
 

 
</div> 
 

 

 
<footer class="container" id="footie"> 
 
    <div class="fixed-footer"> 
 
    <h1 class="end">Copyright &copy; All Rights Reserved.</h1> 
 

 
    </div> 
 

 
</footer>

Danke.

Answer 1

bezifferten es schließlich aus. Die Höhe der Navigationsleiste war, was mir in meinem Code fehlte.

> var navHeight= $('#navi').height(); 
> $('.nav-container').height(navHeight); 

Answer 2

ändern padding oben nach oben Marge einmal und versuchen

img { 
    display: block; 
    margin: 0 auto; 
    padding-top: 25px; 
} 

Gefällt Ihnen dieses

img { 
    display: block; 
    margin: 0 auto; 
    margin-top: 25px; 
}