Vor ein paar Tagen lief ich auf ein Problem, das ich mir nicht vorstellen konnte, dass es in Bezug auf feste Position existiert. Ich habe gesucht und ich habe ein paar Artikel dazu gefunden (am besten beschrieben ist http://bradfrost.com/blog/mobile/fixed-position/) und es scheint, dass keine praktikable Lösung existiert.Feste Position auf Desktop-Browsern, relative/statische Position auf mobilen Geräten (Android, iOS ...)
Kurz gesagt, ich möchte eine feste nav und einen Seitenblock haben, wie Sie unten sehen können (der Code funktioniert perfekt auf Desktop-Browsern (Chrome, Firefox, IE8)), das nur auf Desktop-Browsern angezeigt und funktioniert . Wenn ein Mobilgeräte-Browser wie Android, iOS, Windows Mobile zB) verwendet wird, sollte die feste Position für Nav und Sidebar statisch oder relativ geändert werden, um diese 2 Blöcke mit dem Rest der Seite nach oben zu scrollen.
Lösungen über Medienabfragen sind nicht in Ordnung, da sie auf den Gerätebildschirm und nicht auf das tatsächliche Gerät/den Browser gerichtet sind.
Kann dies getan werden? Ich würde es schätzen, wenn ich es mit mobilen Geräten testen könnte. Dank
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>