jQuery, I have menu in class twenty-sec-wrapper, I need to make it position fixed to top of screen when user scroll down and twenty-sec-wrapper in at the to of the screen
jQuery, There is html with section and each section has id with the same href link in the a tag. I need to create script that add and remove active class on a tag according to the position of user scroll. so for example: if the user scroll over section with id Unrivaled-Scalability the a tag with the href #Unrivaled-Scalability will have the active class and other a tags will not have the active class
jQuery(function(){
jQuery('.twenty-sec-wrapper a').click(function(){
var target = jQuery(this).attr('href');
var offset = jQuery(target).offset().top - vwToPx(9); // Adjust as needed
jQuery('html, body').animate({scrollTop: offset}, 1000);
return false;
});
jQuery(window).scroll(function() {
var hardwareWrapper = jQuery(".hardware-wrapper");
var hardwareWrapperBottomPosition = Math.round(hardwareWrapper.height() + hardwareWrapper.offset().top);
var menu = jQuery(".twenty-sec-wrapper");
var menuOffset = Math.round(menu.offset().top) - vwToPx(2.5);
var scrollTop = jQuery(window).scrollTop();
if (scrollTop >= menuOffset && scrollTop <= hardwareWrapperBottomPosition) {
if( !menu.hasClass("fixed-menu")){
menu.addClass("fixed-menu");
}
} else {
if( menu.hasClass("fixed-menu")){
menu.removeClass("fixed-menu");
}
}
jQuery('.hardware-wrapper .row').each(function() {
var sectionTopPosition = Math.round(jQuery(this).offset().top-vwToPx(11.5));
var sectionHeight = Math.round(jQuery(this).height());
var sectionId = jQuery(this).attr('id');
var navLinks = jQuery('.twenty-sec-wrapper a');
console.log('sectionId',sectionId);
console.log('scrollTop='+scrollTop+' | sectionTopSection='+sectionTopPosition+' | sectionTopSection + jQuery(this).height()='+(sectionTopPosition + sectionHeight)+'');
if (scrollTop >= sectionTopPosition && scrollTop < (sectionTopPosition + sectionHeight)) {
navLinks.removeClass('active');
jQuery('.twenty-sec-wrapper a[href="#'+ sectionId +'"]').addClass('active');
}
});
});
});
// Calculate the equivalent pixel value for a given vw value
function vwToPx(vwValue) {
// Get the current viewport width in pixels
var viewportWidth = jQuery(window).width();
// Calculate the equivalent pixel value for vw
var pxValue = (viewportWidth * vwValue) / 100;
return pxValue;
}<section id="Capabilities-Benefits" class="twenty-sec-wrapper" data-layout="home_section_twenty">
<div class="row display-flex center">
<span><a class="active" href="#Processor-Based-Quantum-Controller" target="_self">Processor-Based Quantum Controller™</a></span>
<span><a class="" href="#Unrivaled-Scalability" target="_self">Unrivaled Scalability</a></span>
<span><a class="" href="#Easy-to-Use" target="_self">Easy-to-Use</a></span>
<span><a class="" href="#HPC-Ready" target="_self">HPC Ready</a></span>
</div>
</section>
<section class="hardware-wrapper background-light-blue title-h2-as-h3 section-padding relative before-bg-image-wrapper after-bg-image-wrapper" data-layout="home_section_six">
<div class="container container-wide">
<div id="Processor-Based-Quantum-Controller" class="flex-row row align-items-center even in-mobile-reverse-order">
<div class="flex-6 box box-text ani opacity active">
<div class="text"><h2><span>Processor-Based<br>
Quantum Controller</span><sup>TM</sup></h2>
<p>text</p>
<div class="button-wrap">
<a class="button background-blue border-blue font-white" href="https://www.quantum-machines.co/pulse-processing-unit/" target="_self">Read More</a>
</div>
</div>
</div>
<div class="flex-6 box box-image left ani opacity ani-delay active">
<div class="image hover popup-image" style="width:100%">
<img class=" lazyloaded" data-src="https://quantumv2dev.wpengine.com/wp-content/uploads/2024/03/CHIPX9.webp" alt="" src="https://quantumv2dev.wpengine.com/wp-content/uploads/2024/03/CHIPX9.webp">
</div>
</div>
</div>
<div id="Unrivaled-Scalability" class="flex-row row align-items-center odd in-mobile-reverse-order">
<div class="flex-6 box box-text ani opacity active">
<div class="text"><h2>Cutting-Edge Analog Frontend with DDS Inside</h2>
<p>text</p>
<div class="button-wrap">
<a class="button background-blue border-blue font-white" href="https://www.quantum-machines.co/request-the-full-opx1000-spec-sheet/" target="_blank">Get OPX1000 Spec Shet</a>
</div>
</div>
</div>
<div class="flex-6 box box-image left ani opacity ani-delay">
<div class="image hover popup-image" style="width:%">
<img class=" lazyloaded" data-src="https://quantumv2dev.wpengine.com/wp-content/uploads/2024/03/OPX1000_left_2000-cut_shadow-scaled.webp" alt="" src="https://quantumv2dev.wpengine.com/wp-content/uploads/2024/03/OPX1000_left_2000-cut_shadow-scaled.webp">
</div>
</div>
</div>
<div id="Easy-to-Use" class="flex-row row align-items-center even in-mobile-reverse-order">
<div class="flex-6 box box-text ani opacity">
<div class="text"><h2>Easy-to-Use</h2>
<p>text</p>
<div class="button-wrap">
<a class="button background-blue border-blue font-white" href="https://www.quantum-machines.co/technology/qua-universal-quantum-language/" target="_self">Read More</a>
</div>
</div>
</div>
<div class="flex-6 box box-image left ani opacity ani-delay">
<div class="image hover popup-image" style="width:100%">
<img class="lazyload" data-src="https://quantumv2dev.wpengine.com/wp-content/uploads/2023/02/QM_qua.png" alt="">
</div>
</div>
</div>
<div id="HPC-Ready" class="flex-row row align-items-center odd in-mobile-reverse-order">
<div class="flex-6 box box-text ani opacity">
<div class="text"><h2>HPC Ready</h2>
<p>text</p>
<div class="button-wrap">
<a class="button background-blue border-blue font-white" href="https://www.quantum-machines.co/blog/quantum-machines-announces-deep-quantum-classical-integration-to-power-quantum-accelerated-supercomputers-with-nvidia/" target="_blank">Read More on DGX Quantum</a>
</div>
</div>
</div>
<div class="flex-6 box box-image left ani opacity ani-delay">
<div class="image hover popup-image" style="width:100%">
<img class="lazyload" data-src="https://quantumv2dev.wpengine.com/wp-content/uploads/2024/03/for-web.png" alt="">
</div>
</div>
</div>
</div>
</section>