How to Make Divi Theme Dot Navigation Appear on Scroll

You can make Divi Theme Dot navigation appear on Scroll easily. You can do it in easy few steps. Check below.

Add below CSS to Theme (or Child Theme)’s style.css or add to Custom CSS.

#page-container ul.et_pb_side_nav.et-visible{
    display: none;
    opacity: 0;
    -webkit-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

#page-container ul.et_pb_side_nav.et-visible-scroll{
    opacity: 1;
    -webkit-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

Add below Javascript to Theme (or Child Theme)’s footer.php before </body>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if ( $('.et_pb_side_nav').length ) {
        $(window).scroll(function(){
            if ($(this).scrollTop() > 800) {
                $('.et_pb_side_nav').show().removeClass( 'et-visible' ).addClass( 'et-visible-scroll' );
            } else {
                $('.et_pb_side_nav').removeClass( 'et-visible-scroll' ).addClass( 'et-visible' );
            }
        });
    }
    });
</script>