Jump to content

Home Page Navigation Scroll + Parallax Scroll - not working

Recommended Posts

Hi everyone, 

Straight up I'm not a coder but I'm trying to achieve two things on my page:

1. Smooth Home page navigation scroll using anchors 

2. Parallax Scroll where images are blocked in the background and the next section overlaps as you scroll down.

Both codes work idividually, however when I combine both in the Custom CCS section, the Parallax code works and the smooth navigation stops working. What happens is when I click on a menu item, it jumps straight to that section and I loose that "smooth scroll" effect. 

Can you guys help me out? is it possible to have both effects?

I've posted the codes I'm using at the end. 

Thanks in advance!

Jen

 

This one in the CSS Custom section: 


{
scroll-behavior: smooth;
}

 

This one in the Code Injection Footer section: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Link to comment
  • Replies 2
  • Views 648
  • Created
  • Last Reply

Hi,

Are you on a version 7 or version 7.1 site? I have the same parallax code on my 7.1 site and have just tested with the smooth scrolling anchor link and it works. Have you got a link to your site also?

Also for your css code for the smooth scrolling is it the below, as cant see the html bit mentioned above 🙂 ?

html {
scroll-behavior: smooth;
}

Link to comment

Hi Erika, 

Thanks for your message. I'm using version 7.1. 

About the html part, yes you are right, I had the html there but accidentally left it out when copy/pasting. 

I will send you the link to my site by message. 

Thanks again. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.