I 'm using the jquery .offset().top to build a fixed menu on my website and it works absolutely perfect but ONLY when the user look at the top of the page. If you try to scroll the body down to the middle and then try to click at the left links of the menu the scroll has strange behavior and doesn't display the correct anchors anymore or even worst stops to work completely. Why is that? What i 'm doing wrong?
$(document).ready(function() {
var $wrapper = $('.popup-cats-wrapper');
$('.black-btn').click(function() {
$wrapper.animate({
scrollTop: $wrapper.scrollTop() + $(".black-anchor").offset().top - 10
}, 400)
});
$('.red-btn').click(function() {
$wrapper.animate({
scrollTop: $wrapper.scrollTop() + $(".red-anchor").offset().top - 10
}, 400)
});
$('.green-btn').click(function() {
$wrapper.animate({
scrollTop: $wrapper.scrollTop() + $(".green-anchor").offset().top - 10
}, 400)
});
$('.blue-btn').click(function() {
$wrapper.animate({
scrollTop: $wrapper.scrollTop() + $(".blue-anchor").offset().top - 10
}, 400)
});
});body {
font-size: 12px;
font-family: "sans";
height:2000px
}
.hero-categories-wrap {
overflow: hidden;
height: 200px;
position:fixed;
}
.popup-cats-wrapper {
height: 200px;
width: 300px;
background: #aaa;
display: inline-block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
overflow-x: auto;
}
.categories-sidebar {
width: 120px;
background: #ececef;
height: 200px;
padding-top: 20px;
float: left;
}
.popup-menu-row {
padding: 5px 8px;
color: #212121;
font-weight: 600;
cursor: pointer;
border-radius: 25px;
margin-bottom: 5px;
}
.color-block {
margin-bottom: 10px;
margin-top: 25px;
}
.cat-title {
font-weight: 600;
font-size: 12px;
color: #000;
margin-bottom: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>
<body>
<div class="hero-categories-wrap">
<div class="categories-sidebar">
<div class="popup-menu-row black-btn">BLACK</div>
<div class="popup-menu-row red-btn">RED</div>
<div class="popup-menu-row green-btn">GREEN</div>
<div class="popup-menu-row blue-btn">BLUE</div>
</div>
<div class="popup-cats-wrapper">
<div class="color-block">
<div class="cat-title black-anchor">BLACK COLOR</div>
<div class="cat-description">Black is the darkest color, the result of the absence or complete absorption of visible light. It is an achromatic color, a color without hue, like white and gray.</div>
</div>
<div class="color-block">
<div class="cat-title red-anchor">RED COLOR</div>
<div class="cat-description">Red is the color at the end of the visible spectrum of light, next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres. It is a primary color in the RGB color model and the CMYK color model, and is the
complementary color of cyan.</div>
</div>
<div class="color-block">
<div class="cat-title green-anchor">GREEN COLOR</div>
<div class="cat-description">Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm. </div>
</div>
<div class="color-block">
<div class="cat-title blue-anchor">BLUE COLOR</div>
<div class="cat-description">Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light. The eye perceives blue when observing light with
a dominant wavelength between approximately 450 and 495 nanometres. Most blues contain a slight mixture of other colours; azure contains some green, while ultramarine contains some violet.</div>
</div>
</div>
</div>
</body>
</html>
