-2
Я хотел использовать следующую схему с липким DIV - Я использую код из этого примера: pixelbind - Make a DIV stick when you scrollпроцент ширины ломая липкий DIV
Он работает точно так, как требуется при использовании фиксированных ширины в пикселях, однако я нужно, чтобы он работал с процентами, левый div 30% и правый 70%, но как только я это делаю, он разбивает липкий div, особенно при изменении размера окна и прокрутке снова.
Я не могу заставить его работать & Я не способен с JS. Любая помощь очень ценится. Ниже приведен пример его работы с фиксированной шириной:
$(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>
Как насчет этого решения является «сломанным» и какой желаемый результат? –
@ André Решение отлично работает, поскольку я разместил его, но мне нужно сделать макет отзывчивым, но когда я пытаюсь использовать% ширины, он ломается ... –