Problem with CSS. Try to put position fixed on skyscraper-ad, but it doesn't work as I want

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: gesf, Michalio

Post Reply

Hey folks and coders :D I am new here and hope you are doing well everybody.

I try to code a website, where there is an advertisment skyscraper on the right side (346x920 Pixel). This is no problem so far, but I try to use JQuery to fix the position of the DIV-Tag, as soon as I scroll down. Now my problem and situation is, that at the end, the advertisment is not behind the footer and social media icons.

I want that as soon as you arrive the end of the site, the ad-skyscraper is hidden behind the black footer bar and the icons.

You can find a very simple demo at the following attached file (open index.php, after put everything somewhere online).

Would appreciate every help. I understand and write ENG, FR and DE.

Thank you so far. Cheers from Switzerland

(53.94 KiB) Downloaded 63 times
User avatar
Posts: 130
Joined: Sun Jul 18, 2021 1:33 pm
Location: Poland

First of all, if you want to show your code then please push it to github (as a standard repo or gist) or similar, then you will be able to get answer faster.

Before you are changing the position from relative to fixed you need to get real position of the element:

Code: Select all

    if (currentScroll >= WerbungFixiertRechts)
        const realLeft = $('.WerbungFixieren').offset().left;
            position: 'fixed',
            top: '7px',
            left: realLeft  + 'px',
But better way is changing only css classes to change the floating mode

Additionally I recommend to you to do not use the echo function to print html tags. The index.php should looks like:

Code: Select all


$FestgelegteSprache = $_COOKIE['FestgelegteSprache'];
setcookie("FestgelegteSprache", 'de', time() + (31536000), "/");

?><!doctype html>
<html lang="de">
And in .js file should be only js code, do not put there html tags to include it with php, in the html part use <script src="..."> instead
Free coding lessons:
Post Reply