At the top, there are two divisions and on a cellphone device, the second one is meant to become fixed after the user scrolls past it.
To see an example of what I am trying to achieve, check out this link: https://jsfiddle.net/livibetter/HV9HM/
Specifically, I want this functionality to be exclusive to cellphones. On desktops, the behavior of the top two divisions should be different. Currently, they are fixed and functioning correctly on desktop displays.
For cellphones, I have disabled the 'fixed' styling for both division one and two. Once the user goes beyond division two while scrolling, I aim to make it fixed and behave as demonstrated in the provided example link.
Here are some code samples from the fiddle:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}