-
AuthorPosts
-
July 30, 2017 at 8:18 am #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 resolutionAppreciate your help & support
Thanks & RegardsAugust 1, 2017 at 12:56 pm #832827Hey 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 -
AuthorPosts
- You must be logged in to reply to this topic.