Die Höhe eines DIVs erweitern, wenn die Seite nach unten scrollt

Ich suche nach einer Möglichkeit, die Höhe eines DIVs dynamisch zu ändern, wenn eine Seite scrollt. Dies liegt daran, dass ich auf der rechten Seite des Bildschirms ein festes Panel und oben ein Menü-Banner habe.Die Höhe eines DIVs erweitern, wenn die Seite nach unten scrollt

Wenn oben auf der Seite oben auf der Seite die Unterseite des Banners oben berührt wird. Das heißt, wenn die Seite nach unten gescrollt wird und das Banner den Bildschirm verlässt, bleibt eine Lücke von der Größe des oberen Banners zwischen dem oberen Rand des Bildschirms und dem oberen Rand des seitlichen Bereichs. Ich würde gerne ein div zwischen sie setzen, die in der Höhe wachsen würde, wenn die Seite nach unten gescrollt wird. Gibt es einen Weg in CSS oder JS dazu?

Ich kann nicht nur die Seitenwand haben 100% Höhe, weil es einige Elemente auf dem oberen Banner, vor allem auf niedriger Auflösung Bildschirm ausblenden würde.

ich habe noch einige hässliche auf Farbe gemacht Bilder zu erklären:

Dies ist die CSS für die Seitenwand:

position: fixed; 
right: 0; 
top: 180px; 
height:calc(100% - 180px);

Quelle

2016-07-12 Saryk

Nicht sicher, dass Sie die richtige Frage fragen. Warum würdest du gerne ein div zwischen ihnen platzieren, das in der Höhe anwächst, wenn die Seite nach unten gescrollt wird? – phuzi

Poste den Code, den du ausprobiert hast oder reproduziere das Problem in [fiddle] ( – Pugazh

@phuzi) Ich habe die Frage mit einigen Bildern aktualisiert – Saryk

Hallo Ich verstehe nicht wirklich, Ihr Banner Situation .. aber in Bezug auf was Sie brauchen, können Sie nur eine js-Funktion aufrufen, wenn Sie scrollen:

<body> 
<div class="content" onscroll="dynamicheight()"> 
</div> 

<script> 
function dynamicheight() { 
    var content = document.getElementById("content"); 
    var y = content.scrollTop; 
    document.getElementById('random').style.height = y; 
} 
</script>

Auf diese Weise wird das div mit der ID zufällig je nachdem, wie viel Sie scrollen. Natürlich müssen Sie es Ihren Wünschen anpassen. Hoffe, das könnte dich ein bisschen führen.

Quelle

2016-07-12 12:30:17

Sieht aus, als was ich brauche, ich werde es sofort versuchen – Saryk

Das scheint leider nicht zu funktionieren, ich habe versucht, andere Werte anstelle der Höhe zu verwenden und keiner scheint aktualisiert zu werden ... – Saryk

Hallo sry, ich hätte änderte den Code ein bisschen es. Sie müssen dem Wert px hinzufügen. Versuchen Sie folgenden Code: document.getElementById ('random'). Style.height = y + "px"; –

Wie pro Ihre Frage, müssen Sie Panel an den oberen Rand des Ansichtsfensters auf Scroll nach rechts?

Zu diesem Zweck Sie einige negative Marge gleich der Höhe der Menüleiste Trick kann wie,

Check this fiddle here

$(window).scroll(function() { 
 
    if ($(".sidepanel").offset().top > 50) { 
 
     $(".sidepanel").addClass("stick-top"); 
 
    } else { 
 
     $(".sidepanel").removeClass("stick-top"); 
 
    } 
 
});

body{ 
 
    margin:0; 
 
    padding:0; 
 
    height:1000px 
 
} 
 
.menu{ 
 
    width:100%; 
 
    height:50px; 
 
    background:#111111 
 
} 
 
.sidepanel{ 
 
    width:200px; 
 
    height:200px; 
 
    background:#888888; 
 
    position:fixed; 
 
    -webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    transition: all 0.35s; 
 
} 
 

 
.sidepanel.stick-top{ 
 
    margin-top:-50px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 

 
<div class="menu"></div> 
 
<div class="sidepanel"></div>

Quelle

2016-07-12 12:31:41

Siehe auf den Inhalt zuerst basierend Sie es anpassen können automatisch.

How to make sidebar with same height as the content div?

Quelle

2016-07-12 12:43:31 Ranjan

Die Höhe eines DIVs erweitern, wenn die Seite nach unten scrollt

Antwort

Verwandte Themen