Aide à la programmation, réponses aux questions / Jquery / Div défilement mais ne pas arrêter en haut de l'écran - jquery, html, css, scroll, fixé

Défilement Div mais ne s'arrêtant pas en haut de l'écran - jquery, html, css, scroll, fixed

Je travaille sur la mise en place d'une action simpleoù, lorsqu'une page est longue, une div commence au centre de l'écran et lorsqu'un utilisateur fait défiler l'écran plus bas, elle se déplace avec le reste du contenu mais s'arrête en haut, le reste du contenu pouvant continuer.

J’ai réussi (avec beaucoup d’aide à passer ici et à chercher) à aller aussi loin que le div scroll, mais cela ne s’arrêtera pas en haut de l’écran et disparaîtra avec le reste du contenu.

Cela fait deux heures que je bricole différentes choses, mais je suis maintenant au-delà de ma compréhension actuelle et je n’ai pas la moindre idée où je me trompe. Toute aide serait appréciée.

Ce que j’utilise comme js, c’est:

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);
};

Le lien codepen: http://codepen.io/anon/pen/embvRL

Réponses:

2 pour la réponse № 1

fait quelque chose comme cela fonctionne pour vous?

violon

code:

<!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>