Free Code Snippets in C#, Net Framework, Office 365, ASP.Net,WPF, Visual Studio, SQL Server, Antivirus free
#

 

 

 

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() >--------

}

 

Mobile
»
HTML: Move the position of an element only up to a certain position
»
Javascript: attach event to all children
»
Asp: Display image refreshed despite browser cache
»
Show Emoticons as Black and White Graphics
»
jQuery Example: Convert text to number, swap image
»
How can I copy something to the clipboard with a button from a web page?
»
Javascript: how to get the URL of the current website
»
Javascript: Query dialog OK Cancel
»
Bilder automatisch in der Größe anpassen mit CSS
»
Javascript: change style in javascript

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de