Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1274223

    Hi,

    I would like to know if someone have succeed to set theirs sidebar on sticky mode. I tried to use position:sticky but it’s not working.
    I would like to have sticky sidebar on:
    woocommerce products categories pages : https://valer.fr/categorie-produit/marques/dinh-van/
    – pages : https://valer.fr/messika/

    Best regards,
    Clément

    #1274383

    Hi Clément,

    Can you try the solution posted in: https://kriesi.at/support/topic/create-a-sticky-sidebar/
    Hope it helps.

    Best regards,
    Nikko

    #1274454

    Hi,

    Unfortunetly it’s not working. Even if I change sidebar_right by sidebar_left or aside.sidebar_left.

    Do you have another solution?

    Best regards,
    Clément

    #1274639

    Hi Clément,

    Please try the Mike’s solution posted on this thread: https://kriesi.at/support/topic/sidebar-soll-mit-fliesen/
    In the code, there’s:

    var $sticky = $('#top.single-post .inner_sidebar.extralight-border');

    Try to replace it with:

    var $sticky = $('#top .inner_sidebar');

    Best regards,
    Nikko

    #1274765

    Hi,

    Thanks for your answer. It’s a,n improvement cause the sticky appears but it’s sticky to the top of the page and not the begining og the products grid.

    Do you know how can I link the sticky to the begining of the product grid ?

    Best regards,
    Clément

    #1274941

    Hi Clément,

    Can you try this code instead:

    function custom_sticky_script(){
    ?>
    <script>
    (function ($) {
        var $sticky = $('#top .inner_sidebar');
        var $sidebar = $('#top .sidebar');
        var topPadding = $('#header_main').outerHeight();
        var start = $sticky.offset().top - topPadding;
        var stop = $('#footer').offset().top - $sticky.outerHeight() - topPadding - 20;
        var top = $('#main .container_wrap_first .container').outerHeight() - $sticky.outerHeight() - 20;
        var width = $sticky.outerWidth();
    
        $(window).scroll(function (e) {
            var scrollTop = $(this).scrollTop();
            if (scrollTop > start ) {
                $sticky.css({ 'position': 'fixed', 'width': width + 'px'});
                if (scrollTop > stop) {
                    $sticky.css({position: 'absolute', 'top': top});
                    $sidebar.css({overflow: 'visible'});
                } else {
                    $sticky.css({position: 'fixed', 'top': (topPadding - 20) + 'px'});
                }
            } else {
                $sticky.css({ 'position': 'static', 'top': '0'});
                $sidebar.css({overflow: 'hidden'});
            }
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_sticky_script');

    Best regards,
    Nikko

    #1274958

    on a lot of problems only a script will do the job – but if only css can do i would prefer this solution.
    So try instead that edited work here – without the scripts!

    on that one page: https://valer.fr/messika/

    the height of the sidebar is as big as the content container
    That is why the sticky wouldn’t work:

    try :

    .responsive body#top.page-id-12082 {
    	overflow-x: visible;
    }
    
    #top.page-id-12082 #wrap_all {
    	overflow: visible;
    }
    
    @media only screen and (min-width: 767px){  
    	#top.page-id-12082 .sidebar_left .container {
    		display: flex !important;
    		align-self: ;
    		flex-flow: row nowrap;
    		justify-content: flex-start;
    	}
    
    	#top.page-id-12082 .sidebar_left .content {
    		order: 2
    	}
    
    	#top.page-id-12082 #main .sidebar {
    		position: -webkit-sticky !important;
    		position: sticky !important;
    		top: 100px;   
    		width: 30%;  
    		order: 1;
    		height: 100%;
    	}
    }

    Comment: it will be more impressive and meaningful if content is much longer than the sidebar !

    next page …

    #1274964

    the other page – you have to find the specific selector for that page yourself !
    i took now the woocommerce on general – maybe you better take a more specific class something like : term-dinh-van on #top

    because the woocommerce-products-header would be part of the flex container it had to be set to display none.
    I do not know if you need it – but on your page there was no content in it so i put it to display none.
    this woocommerce-products-header had to be on that place inside ?

    anyway try to see whats happening on that page – but remember my advice on top!

    .responsive body#top.woocommerce {
    	overflow-x: visible;
    }
    
    #top.woocommerce #wrap_all {
    	overflow: visible;
    }
    
    #top.woocommerce .woocommerce-products-header {
        display: none;
    }
    
    @media only screen and (min-width: 767px){  
    	#top.woocommerce .sidebar_left .container {
    		display: flex !important;
    		align-self: ;
    		flex-flow: row nowrap;
    		justify-content: flex-start;
    	}
    
    	#top.woocommerce .sidebar_left .content {
    		order: 2
    	}
    
    	#top.woocommerce #main .sidebar {
    		position: -webkit-sticky !important;
    		position: sticky !important;
    		top: 100px;   
    		width: 30%;  
    		order: 1;
    		height: 100%;
    	}
    }
    #1274966

    Hi,
    Thanks ! it’s almost perfect. on this page it’s not working correctly: https://valer.fr/messika/
    I tried to play with top:100px; in order to ajust it but even so the sidebar is sticky but I cannot see the bottom of it and there is a light superposition.

    We’re close! thanks a lot.

    Clément

    #1274968

    Try without script – it jumps away
    and scroll behavior is strange on that pages – remove it please and test my solution only from above.

    The behavior is not good like that either. The sidebar should be sticky as long as possible, and then scroll with the content at the bottom so that they both end at the bottom.

    #1275514

    btw. it would be nice to hear from you if it is solved ;)
    and:
    can you have a look what happens if you set the images in the banners to scroll or fixed position. The parallax seems to be a bit buggy:
    point with your mouse over the banner on top and try to scroll then.

    #1275515

    Hi,

    Sorryy I did respond yesterday but it seems that something get wrong with my answer.

    Anyway thank you very much !! The CSS works well. I use the .woocommerce for all my natives categories pages and .page-id with all my custom pages.

    You can close that topic.

    best regards and thanks again.
    Clément

    #1275520

    Hi Clément,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    @guenni007 Thanks again for helping and providing a much simpler solution :)

    Best regards,
    Nikko

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.