Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Home Page Navigation Scroll + Parallax Scroll - not working


JenniBabs

Question

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>

Edited by JenniBabs
Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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
  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...