Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #831738

    First of all I would like to thank all of Enfold Dev Team for this amazing support

    I’ve searched about this problem and unfortunately I couldn’t find a proper solution, so kindly accept this topic

    What I want is simply a sticky Color Section that sticks right after Sticky & Shrinkable Header, I have already done that!

    This is what I’ve done:
    1 – created a color section with ID: sticky
    2 – added a code block on the same page which have this code:

    <script>
    (function($){
    	$(document).ready(function () {  
    		var top = $('#sticky').offset().top;
    		$(window).scroll(function (event) {
    			var y = $(this).scrollTop();
    			var header =  $('#header_main').height();
    			console.log(header);
    			if (y >= top-header){
    				$('#sticky').addClass('fixed');
    				$('#after_full_slider_1').attr("id","show_after_full_slider_1");
    			}
    			else{
    				$('#sticky').removeClass('fixed');
    				$('#show_after_full_slider_1').attr("id","after_full_slider_1");
    		}
    		$('#sticky').width($('#sticky').parent().width());
    		});
    	});
    })(jQuery);
    </script>

    3 – added this in Quick CSS:

    .fixed {
      position:fixed;
      top:60px;
      z-index:2;
    }
    #sticky .content { padding-top: 0; padding-bottom: 0; }
    #sticky {
    height: 70px;
    min-height: 70px;
    }

    Now it seems to be working fine on PC, but not on smart devices (ipad, iphone, android…)
    see the link
    I’m not a programmer but I assume that the solution is all about understanding header behavior and the Device resolution

    Appreciate your help & support
    Thanks & Regards

    #832827

    Hey JamalSalim,

    Thank you for using Enfold.

    Which elements have the “fixed” class attribute? You might want to disable the effect on mobile by including a conditional logic.

    		var isMobile = '';
    		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
    		{
    			isMobile =  true;
    		}
    		else
    		{
    			isMobile =  false;
    		}
    
    		if(isMobile || window.innerWidth < 1024) return;
    

    Best regards,
    Ismael

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.