Допомога у програмуванні, відповіді на питання / Джейкері / Розгортання, але не зупинки у верхній частині екрана -

Прокрутка дива, але не зупиняючись у верхній частині екрана - jquery, html, css, прокрутка, фіксована

Я працював над створенням простих дійде, коли сторінка довга, div починається в центрі екрана, а коли користувач прокручується далі по екрану, div рухається з рештою вмісту, але зупиняється у верхній частині, а решта вмісту може продовжуватися.

Мені вдалося (з великою кількістю допомоги, що йде тут і шукати) отримати так само, як і прокручування div, але воно не зупиниться у верхній частині екрана і зникає з іншим вмістом.

Я був возитися з різними бітами протягом останніх кількох годин, але тепер я "м просто за моїм поточним розумінням і просто не отримав підказку, де я" йду не так.

Що я використовую як js:

var StickyElement = function(node){
var doc = $(document),
fixed = false,
content = node.find("#logo");

var onScroll = function(e){
var docTop = doc.scrollTop(),
anchorTop = anchor.offset().top;

console.log("scroll", docTop, anchorTop);
if(docTop > anchorTop){
if(!fixed){
anchor.height(content.outerHeight());
content.addClass("stuck");
fixed = true;
}
}  else   {
if(fixed){
anchor.height(0);
content.removeClass("stuck");
fixed = false;
}
}
};

$(window).on("scroll", onScroll);
};

Посилання для кодування http://codepen.io/anon/pen/embvRL

Відповіді:

2 для відповіді № 1

чи щось подібне працює для вас?

скрипка

код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
height: 100%;
width: 100%;
}

* {
padding: 0;
margin: 0;
}

.main {
position:relative;
z-index: 5;
}

.main p {
margin-bottom: 16px;
}

.centered_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(50%);
transform: translateY(-50%);
width: 240px;
line-height: 60px;
text-align:center;
font-size: 60px;
z-index: 10;
margin: 0 0 0 -120px;
}

.fixedPos {
position:fixed !important;
top: 0;
transform: translateY(0);

}

</style>
</head>
<body>

<div class="centered_text">
centered
</div>
<div class="main">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
var originalLogoPosition = $(".centered_text").offset().top;

$(window).scroll(function () {
var logo = $(".centered_text");
var pos = logo.offset();
var posScrollTop = pos.top;

if ($(this).scrollTop() > posScrollTop) {
logo.addClass("fixedPos");
} else if ($(this).scrollTop() < originalLogoPosition) {
logo.removeClass("fixedPos");
}
});
</script>

</body>
</html>