Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register

HTML: Move the position of an element only up to a certain position

20.04.2018 (👁2904)


How does one set it that an HTML element is only moved to a certain position when the browser moves the page?

 

View browser

In this example, the DIV area on a web page is only moved to the top of the window. The element thus always remains visible and in the visible area of ​​the web page in the browser.

 

Solution: HTML and Javascript

 

In the upper position

When the page is scrolled right down, the display on the left side will only move to the top edge

 

Implementation in the script:

For the implementation one needs an HTML element as DIV container on the HTML Website.

The element needs an id as identifier and the position as fixed with specifying the left and top distance.

<div id="divAd_Left" style="position:fixed;top:36px;left:0px;">

     ..Content…

     ..Content…

     ..Content…

</div>

 

 

 

Javascript part

The implementation is done in simple Javascript.

First, any change to the browser must be recorded while scrolling. To do this, add the event scroll to the window.

window.addEventListener("scroll", onScroll);

 

When scrolling

Once scrolled, it checks to see where the current HTML element is in the client browser.

The position is queried with getBoundingClientRect ()

var rect_Left = divLeft.getBoundingClientRect();

 

Then it is checked if the upper position falls below a value and if necessary the HTML element is then adapted to the limitation with the .style.Top attribute

    var rect_Left = divLeft.getBoundingClientRect();

    var posTop = rect_Left.top;   

    if (posTop < 0) {

        divAd_Left.style.top = "0px";

    }

    else {       

        divAd_Left.style.top = posTop + "px";       

    }

    //--</ Left Ad-Position >--

 

 

 

Javascript code

In order for the position to be adapted at runtime, the element''''s .Top setting must be checked and set using Javascript.

//load HTML_Editor

$(document).ready(load_View);

function load_View() {

    window.addEventListener("scroll", onScroll);

}

function onScroll() {

    //--------< onScroll() >--------

   

    //--< Left Ad-Position >--

    var rect_Left = divLeft.getBoundingClientRect();

    var posTop = rect_Left.top;   

    if (posTop < 0) {

        divAd_Left.style.top = "0px";

    }

    else {       

        divAd_Left.style.top = posTop + "px";       

    }

    //--</ Left Ad-Position >--

    //--< Right Ad-Position >--

    var rect_Right = divRight.getBoundingClientRect();

    var posTop_Right = rect_Right.top;

    if (posTop_Right < 0) {

        divAd_Right.style.top = "0px";

    }

    else {

        divAd_Right.style.top = posTop_Right + "px";

    }

    //--</ Right Ad-Position >--

    //--------</ onScroll() >--------

}