Disable Sticky sidebar on responsive view
Multi tool use
Disable Sticky sidebar on responsive view
from the title itself. I want to disable the sticky sidebar during mobile view / responsive view. Currently, I am able to create a floating sidebar by adding this JQUERY code.
HTML
PHP 2,500.00
<ul class="list-icon list-icon-orange">
<li><i class="fa fa-calendar info-icon"></i><span class="info-label">Earliest available date: 14 Jun 2018</span></li>
<li><i class="fa fa-hourglass-2 info-icon"></i><span class="info-label">48 Hours Confirmation</span></li>
<li><i class="fa fa-flag-o info-icon"></i><span class="info-label">Join Group</span></li>
</ul>
<p class="info-p">
Fill up this form and received a confirmation within 24 hours. LAST MINUTE BOOKING for next day must be made on or before 3:00PM.
</p>
Book
</div>
</div>
</div>
</div>
</div>
JQUERY
$(function() {
var $sidebar = $(".sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 115;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
It works fine on large resolution but I just can't seem to disable it during mobile view. any help would be appreciated. Thanks
@RantoRasolomahefa nailed it!! That did the trick!! Thanks!
– drake24
Jul 4 at 1:38
1 Answer
1
So base from the suggestion, I managed to fix it with some if statements and it did the trick :)
var isMobile = false;
if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
isMobile = true;
}
if (isMobile != true) {
$(function() {
var $sidebar = $("#sticky"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 115;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Take a look here to check mobile device stackoverflow.com/questions/3514784/… Also, you can check window width
– Ranto Rasolomahefa
Jul 2 at 14:07