Disable Sticky sidebar on responsive view

Question

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

<div  class="sidebar col-md-4">
    <div class="">
        <div class="widget">
            <div class="total-payment">PHP 2,500.00</div>
            <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>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group text-center">
                         <button type="button" class="btn btn-block btn-orange" style="font-size:24px;">Book</button>
                    </div>
                </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

Take a look here to check mobile device https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery Also, you can check window width — Ranto Rasolomahefa, Jul 02 '18 at 14:07

score 0 · Accepted Answer · answered Jul 04 '18 at 01:40

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
                });
            }
        });
    });
}

Disable Sticky sidebar on responsive view

1 Answers1