Feste Position eines Div unterhalb der Kopfzeile beim Blättern der Seite - jquery, html, css

Ich möchte ein Div unter der Kopfzeile haben, um beim Scrollen die oberste feste Position einzunehmen. Wenn die Seite nach oben gescrollt wird, muss auch die Kopfzeile angezeigt werden.

CSS

.header {
height:100px;
background:#ffe1d8;
width:100%;
}
.converter {
height:100px;
background:#9fff42;
width:100%;

}
.content {
width:100%;
background:#faff70;
min-height:800px;
}
.fixed-pos {
position:fixed;
top:0;
z-index:1000;
}

HTML

  <div class="header">&nbsp;</div>
<div class="converter">&nbsp;</div>
<div class="content">&nbsp;</div>

jQuery

 $(document).ready(function() {
$( window ).scroll(function() {
$( ".converter" ).addClass("fixed-pos");
if ($( ".converter" ).scrollTop(100 )) {
$( this ).removeClass("fixed-pos");
}
});
});

JsFidel Hier.

In der obigen Geige den grünen Farbteil (.Konverter) nimmt beim Scrollen nach unten eine feste Position von oben ein. Wenn der Bildschirm nach oben gescrollt wird, befindet er sich an derselben Position wie oben und verbirgt den Header (pink) darüber. Ich möchte, dass die Kopfzeile über .converter div angezeigt wird, wenn der Bildschirm am häufigsten nach oben gescrollt wird.

Irgendeine Hilfe ?

Antworten:

4 für die Antwort № 1

Es sollte sein

$(window).scroll(function() { //OnScroll, invoke
if($(this).scrollTop() > 100) {
//If the current scroll position is more than 100, add class
$( ".converter" ).addClass("fixed-pos");
} else {
//Else remove it
$( ".converter" ).removeClass("fixed-pos");
}
});

Demo

Was war das Problem mit Ihrer Lösung? Zuerst haben Sie die Klasse sofort in die Schriftrolle eingefügt und dann mit der entfernt if Zustand und statt zu verwenden $(".converter") sollte mit $(this) Referenzierung Fenster und vergleichen

---

Dank an @EIN. Wolff für die weitgehende Umgestaltung des Codes mit .toggleClass()

$(window).scroll(function() {
$(".converter").toggleClass("fixed-pos", $(this).scrollTop() > 100);
});

Demo 2

---

0 für die Antwort № 2

Dies könnte für Sie funktionieren:

http://jsfiddle.net/CjPAa/2/

$(document).ready(function() {
$( window ).scroll(function() {

var defaultPosition = $(".header").offset().top + $(".header").outerHeight();

if($(window).scrollTop() > defaultPosition){
$( ".converter" ).addClass("fixed-pos");
} else {
$( ".converter" ).removeClass("fixed-pos");
}

});
});

---

0 für die Antwort № 3

Sie können das mit nur CSS tun ... Sie brauchen überhaupt keine Abfrage

.header {
height:100px;
background:#ffe1d8;
width:100%;
position:fixed;
}
.converter {
height:100px;
margin-top:100px;
background:#9fff42;
width:100%;
position:fixed;
}
.content {
width:100%;
background:#faff70;
min-height:800px;
}

---

0 für die Antwort № 4

Ich bin mir nicht ganz sicher, was Ihr Ergebnis sein soll. Aber vielleicht ist es das:

(function () {
var scrollMinimum = 0; // minimum scroll offset to fix the bar
var $scrollTopBar = $(".converter");
var $win = $(window);
var visible = false; // whether the bar is currently shown

$win.on("scroll", function(){
if (visible == false && $win.scrollTop() > scrollMinimum){
visible = true;
$scrollTopBar.addClass("fixed-pos");
} else if (visible == true && $win.scrollTop() <= scrollMinimum) {
visible = false;
$scrollTopBar.removeClass("fixed-pos");
}
});
})();

Geige

---