1
数日前、私は固定位置に関して存在するとは思わなかった問題に遭遇しました。私は検索し、これに関するいくつかの記事を見つけました（最もよく記述されているのはhttp://bradfrost.com/blog/mobile/fixed-position/です）、実行可能な解決策が存在しないようです。デスクトップブラウザの固定位置、モバイルデバイスの相対的/静的な位置（Android、iOS ...）
要するに、デスクトップブラウザ（Chrome、Firefox、IE8）で完璧に機能するコードは、固定ナビゲーションとサイドブロックを必要とします。デスクトップブラウザでのみ表示され、そのように動作します。 Android、iOS、Windows Mobileなどのモバイルデバイスブラウザを使用している場合は、ナビとサイドバーの固定位置を静的または相対的に変更して、2つのブロックをページの残りの部分とスクロールさせる必要があります。
メディアクエリによる解決策は、デバイスの画面をターゲットにし、実際のデバイス/ブラウザを対象としていないため、問題ありません。
これはできますか？私はモバイルデバイスでテストするためにjsfiddleに感謝します。 { ALL jQueryのCODE |（OS X/i.test（navigator.userAgent）/ Windowsの）おかげ
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>