I’m a JavaScript novice and I’m trying to make something on my own. In this case I’ve created a fake vertical slider that actually works with the normal page scroll. However, I’ve chosen to insert a menu on the right-hand side which allows you to navigate between the slider elements by means of anchor links.
Next to this menu there is a svg representing an upward and a downward arrow which can act as trigger points to scroll between the slider elements.
I have set up the highlighting of the active element and I was able to set the anchor link to the click of the arrows and the recognition of the next or previous one.
What I can’t manage to set is the synchronisation between the various scroll options. In fact, if I scroll with the mouse or click on one of the elements, the arrows do not update their position.
I hope I can explain this.
I share the reference JSFiddle. (Sorry for the spartan graphic appearance).
You can see it better implemented here
$(document).ready(function() {
var $currentElement = $(".single-product").first();
$("#down").click(function() {
var $nextElement = $currentElement.next('.single-product');
// Check if the next element exists by measuring its length
if ($nextElement.length) {
// Se esiste, aggiorna l'elemento corrente e scorre
$currentElement = $nextElement;
$('html, body').stop(true).animate({
scrollTop: $nextElement.offset().top
}, 1000);
}
return false;
});
$("#up").click(function() {
var $prevElement = $currentElement.prev('.single-product');
// Check if the next element exists by measuring its length
if ($prevElement.length) {
// Se esiste, aggiorna l'elemento corrente e scorre
$currentElement = $prevElement;
$('html, body').stop(true).animate({
scrollTop: $prevElement.offset().top
}, 1000);
}
return false;
});
//highlight anchor link on scroll
// Cache selectors
var topMenu = $("#product-menu"),
topMenuHeight = topMenu.outerHeight() + 100,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
});
});.scroll-slider-container{
display:flex;
align-items:flex-start;
}
.product-container{
width:70%;
}
.navigation-container{
width:30%;
position:fixed;
right:0;
}
.single-product{
height:700px;
background: url(https://development.nutfordesign.com/wp-content/uploads/2021/10/img-slide-1.png);
}
#product-menu{
display:flex;
align-items:center;
}
#menu-product-side-menu{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.nav-arrows{
width:30px;
}
.active{
font-weight:700!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-slider-container">
<div class="product-container">
<div id="product-1" class="single-product">
<h2>Prodotto 1</h2>
</div>
<div id="product-2" class="single-product">
<h2>Prodotto 2</h2>
</div>
<div id="product-3" class="single-product">
<h2>Prodotto 3</h2>
</div>
<div id="product-4" class="single-product">
<h2>Prodotto 4</h2>
</div>
</div>
<div id="product-menu" class="navigation-container">
<ul id="menu-product-side-menu "class="nav-list">
<li><a href="#product-1">Prodotto 1</a></li>
<li><a href="#product-2">Prodotto 2</a></li>
<li><a href="#product-3">Prodotto 3</a></li>
<li><a href="#product-4">Prodotto 4</a></li>
</ul>
<div class="nav-arrows">
<svg version="1.1" id="double-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 200 2000" style="enable-background:new 0 0 200 2000;" xml:space="preserve">
<style type="text/css">
.st0{opacity:2.000000e-02;fill:#FFFFFF;}
.st1{fill:#1D1D1B;}
</style>
<a href="" id="down" class=" arrow next">
<g>
<rect y="1000" class="st0" width="200" height="1000"/>
<path id="arrow-down" class="st1" d="M168.9,1867.9c-1.4-1.4-3.8-1.4-5.2,0c0,0,0,0,0,0l-60,60V1000h-7.4v927.9l-60-60
c-1.4-1.4-3.8-1.4-5.2,0s-1.4,3.8,0,5.2l0,0l66.3,66.3c1.4,1.4,3.8,1.4,5.2,0c0,0,0,0,0,0l66.3-66.3
C170.3,1871.7,170.3,1869.4,168.9,1867.9z"/>
</g>
</a>
<a href="" id="up" class="arrow prev">
<g>
<rect class="st0" width="200" height="1000"/>
<path id="arrow-up" class="st1" d="M168.9,132.1c-1.4,1.4-3.8,1.4-5.2,0c0,0,0,0,0,0l-60-60V1000h-7.4V72.1l-60,60
c-1.4,1.4-3.8,1.4-5.2,0s-1.4-3.8,0-5.2l0,0l66.3-66.3c1.4-1.4,3.8-1.4,5.2,0c0,0,0,0,0,0l66.3,66.3
C170.4,128.3,170.4,130.6,168.9,132.1C168.9,132.1,168.9,132.1,168.9,132.1z"/>
</g>
</a>
</svg>
</div>
</div>
</div>