Question

几天前，我遇到了一个问题，我没想到固定位置存在的问题。我搜索过，我发现了一些关于此的文章（最好的描述是http://bradfrost.com/blog/mobile/fixed-position/），似乎没有可行的解决方案。

简而言之，我想要一个固定的导航和一个侧面块，你可以看到下面的代码（这些代码在桌面浏览器（Chrome，Firefox，IE8）上非常完美），它只在桌面浏览器上显示和工作。如果使用移动设备浏览器（如Android，iOS，Windows Mobile等），导航和侧边栏的固定位置应以静态或相对方式更改，以使这两个块与页面的其余部分向上滚动。

通过媒体查询的解决方案不合适，因为它们的目标是设备屏幕，而不是实际的设备/浏览器。

可以这样做吗？我很感激jsfiddle用移动设备测试它。感谢

var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;

win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
});

/*!
 * StickySidebar jQuery Plugin v1.0.1
 * Copyright 2014 Dawid Pawelec
 * Released under the MIT license
 */

(function ($) {
    var $w = $(window);

    $.fn.stickySidebar = function (options) {
        var o = $.extend({}, $.fn.stickySidebar.defaults, options),
            $c = $(o.container);

        return this.each(function () {
            var $s = $(this),
                sh = $s.outerHeight(),
                originalMarginTop = parseInt($s.css('margin-top'), 10),
                top = $s.offset().top - o.offsetTop - originalMarginTop,
                bottom = $c.offset().top + $c.outerHeight() - o.offsetTop,

                handleScroll = function () {
                    var scroll = $w.scrollTop();
                    if (scroll > top) {
                        if (scroll + sh + o.offsetBottom > bottom && o.bottom) {
                            $s.removeClass(o.stuckClass);
                            $s.addClass(o.bottomClass);
                        } else {
                            $s.css('margin-top', o.offsetTop + originalMarginTop);
                            $s.addClass(o.stuckClass);
                        }
                    } else {
                        $s.css('margin-top', originalMarginTop);
                        $s.removeClass(o.stuckClass);
                        $s.removeClass(o.bottomClass);
                    }
                };

            $w.on('scroll', handleScroll);
        });

    };

    $.fn.stickySidebar.defaults = {
        stuckClass: 'fixed',
        bottomClass: 'bottom',
        container: '.container',
        offsetTop: 80,
        offsetBottom: 0,
        bottom: true
    };

}(jQuery));



// Usage
$('.sidebar').stickySidebar({
    container: '.container',
    offsetBottom: 5
});

.header, .footer {
    background: #ddd;
    padding: 15px;
    border-radius: 5px
}
.header-top {height:50px;}
.header-bottom {height:60px;}
.header {
    margin-bottom: 5px;
    height: 120px;
}

.container {
    background: #ddd;
    margin-bottom: 5px;
    padding: 5px;
    position: relative;
    border-radius: 5px;
}

.sidebar, .main-content {
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px;
}

.sidebar {
    position: absolute;
    width: 169px;
    height: 200px;
}

.sidebar.fixed {
    position: fixed;
    top: 0;
}

.sidebar.bottom {
    bottom: 5px;
}

.main-content {
    margin-left: 205px;
    width: 253px;
    height: 2000px;
    min-height: 400px;
}

.footer {
    height: 500px;
}

nav {
  height:50px;
  padding:10px;
  background-color:black;
  color:white;
}

nav.fixed {
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header">
    <div class="header-top">Header</div>
    <div class="header-bottom"><nav>Sticky!</nav> </div>
    </header>
   
    <div class="container">
        <div class="sidebar">Sidebar</div>
        <div class="main-content">Main</div>
    </div>
    
    <footer class="footer">Footer</footer>

Answer 1

我设法通过插入所有jquery代码来解决问题 if（/ Windows | OS X / i.test（navigator.userAgent））{ 所有的JQUERY CODE }

通过这种方式，一切正常（在Windows上测试 - Chrome / IE8 / Firefox; osx笔记本电脑-Safari / Chrome / Firefox; Android平板电脑）

固定桌面浏览器上的位置，移动设备上的相对/静态位置（Android，iOS ......）

1 个答案: