After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up.
Do you think this is achievable?
Although I have succeeded in wrapping it while scrolling down, I believe there is a flaw in the logic. The wrapping keeps getting executed repeatedly as I scroll down. It should only happen once I scroll past 500px.
Thank you for your help!
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".show-on-scroll-wrapper");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$('.mobile-nav-toggle-label').wrapAll('<div id="showOnScrollWrapper" class="show-on-scroll-wrapper show"></div>');
//the wrapping should only occur once
} else {
//need to be able to unwrap the div if I scroll back to the top
}
});
});