-2
Ich will das folgende Layout mit einer klebrigen div verwenden - ich verwende Code aus diesem Beispiel: pixelbind - Make a DIV stick when you scrollProzentsatz Breite brechen klebrig div
Es funktioniert genau so, wie erforderlich, wenn in Pixeln mit festen Breiten, aber ich muss es mit Prozentsätzen arbeiten, die linke div 30% und die rechte 70%, aber sobald ich dies tue bricht es die klebrige div, vor allem wenn die Größe des Fensters und Scrollen wieder.
Ich kann nicht scheinen es funktioniert & Ich bin nicht fähig mit JS. Jede Hilfe wird sehr geschätzt. Unten ist ein Beispiel davon mit festen Arbeitsbreiten:
$(document).ready(function() {
\t var s = $("#sticker");
\t var pos = s.position(); \t
\t var stickermax = $(document).outerHeight() - $("#catalogue").outerHeight() - s.outerHeight() - 0; //40 value is the total of the top and bottom margin
\t $(window).scroll(function() {
\t \t var windowpos = $(window).scrollTop();
\t \t if (windowpos >= pos.top && windowpos < stickermax) {
\t \t \t s.attr("style", ""); //kill absolute positioning
\t \t \t s.addClass("stick"); //stick it
\t \t } else if (windowpos >= stickermax) {
\t \t \t s.removeClass(); //un-stick
\t \t \t s.css({position: "absolute", top: stickermax + "px"}); //set sticker right above the footer
\t \t \t
\t \t } else {
\t \t \t s.removeClass(); //top of page
\t \t }
\t });
\t //alert(stickermax); //uncomment to show max sticker postition value on doc.ready
});html, body {
\t margin:0;
\t padding:0;
}
body {
\t font-family:Segoe UI, Lucida Grande, sans-serif;
\t font-size:13px;
\t color:#444444;
\t line-height:18px;
}
div#wrapper {
\t margin:0 auto;
\t width:900px;
\t background:#FFF;
\t background-color:#0F3;
}
div#brand-detail {
\t width:560px;
\t padding:0px;
\t float:right;
\t background-color:#FFF;
\t padding:20px;
}
div#brand-bio {
\t width:230px;
\t float:left;
\t /*padding:20px;*/
\t margin-left:30px;
}
.clear {
\t clear:both;
}
div#sticker {
\t padding:0;
\t margin:0;
\t background:#FC0;
\t width:190px;
\t padding:20px;
\t /*margin:20px 0;*/
}
.stick {
\t position:fixed;
\t top:0px;
}
#catalogue {
\t background:#999999;
\t height:1000px;
\t width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="brand-bio">
\t <!--<h2>brand bio</h2>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum.</p>-->
<div id="sticker">
\t <p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
</div>
</div>
\t <div id="brand-detail">
\t <h1>Main Content</h1>
\t <p>Here's some content, but that's not really important. The sidebar has a div a few lines down with an ID of "sticker". Once this div gets to the top of the page, it will stick there. This is a great way to show advertisements without worrying that your audience may quickly scroll past them. Could also play nicely as navigation helpers.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
<p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
</div>
<div class="clear"></div>
</div><!--/wrapper-->
<div id="catalogue">
more stuff
</div>
Was ist mit dieser Lösung "gebrochen" und was ist das gewünschte Ergebnis? –
@ André Die Lösung funktioniert gut, wie ich es gepostet habe, aber ich muss das Layout ansprechend machen, aber wenn ich% wides verwenden bricht es ... –