New to the community? Start here

Hide a section on scroll

Hi there,
I have a ‘splash’ section at the top of my page that I want to hide on scroll. I have managed to achieve this (in a way!) however the page jumps down when the section fades out. Do you know if I can avoid this happening? Here is a link to the page https://dev.theslimmingclinic.com/new-home-scroll-test/
I have pasted my code below –
<div id="splash"> </div> <script> jQuery(document).ready(function() { jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 500) { jQuery('#splash').fadeOut(2000); } else { jQuery('#splash').fadeIn(2000); } }); }); </script>

Any ideas on how to resolve this would be much appreciated!

Wed, 27 Nov 2019 18:00:22
  • Kris Tomczyk
    • Ex Staff

    Hi nifty

    I hope you are doing good today.

    fadeOut should not generate such jump as it changes element opacity to 0. So another part of the code must make this section display none.

    This can be done in many different ways. For sure it will be hard to archive if you use any page builder but base on my below code you should be able to set up for both sections separate IDs.

    My example base on additional CSS class which makes this first section opacity after you scroll to some point.

    var _rys = jQuery.noConflict();
            _rys("document").ready(function () {
                var docWidth = jQuery(document).width();
                    if (docWidth > 979) {
                _rys(window).scroll(function () {
                    if (_rys(this).scrollTop() > 300) {
                        _rys('#div01').addClass("setopacity");
                    } else {
                        _rys('#div01').removeClass("setopacity");
                    }
                });
            }
            });

    1. docWidth > 979 – you can set up a mobile breakpoint, so this could be applied to desktop views only.
    2. _rys(this).scrollTop() > 300 – if the first section is 400 height I will set up this value as 300, so when the bottom section will start to cover the first one the opacity will start.

    body {padding:400px 0 0 0;}
    #div01 {position: fixed; left:0; top:0; background:red; width:100%; height:400px; overflow:hidden; transition: opacity 2s ease;}
    .setopacity {opacity:0;}
    #div02 {position:relative; width:50%; margin:0 auto; height:1500px; background:yellow; overflow:hidden; }

    CSS for the first div is set up as position fixed and it has static height, I recommend to resize a little bit this image height so it could be visible on desktops.

    CSS for the second div should be simple, this one above is just an example, so you can create own. HTML file on PC and test how that works.

    CSS for the body is set up with additional top padding because we need space for the first div which is fixed.

    <div id=”div01″>lorem</div>

    <div id=”div02″>
    ======================
    top text
    ======================
    </div>

    And here w have two of those divs.

    Here is a full example of how this work:
    https://codepen.io/kriswpmu/pen/RwwXGYZ

    Kind Regards,
    Kris