Question

来自标题本身。我想在移动视图/响应视图期间禁用粘性侧边栏。目前，我可以通过添加此JQUERY代码来创建浮动边栏。 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
                    });
                }
            });

        });

在高分辨率下它可以很好地工作，但是我似乎无法在移动视图中禁用它。任何帮助，将不胜感激。谢谢

Answer 1

因此，根据建议，我设法用一些if语句对其进行了修复，并且达到了应有的效果：）

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

在响应视图上禁用粘性侧栏

1 个答案: