float css only menu - how to modify on section2


Tags: css,css3

Problem :

Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:

<style>
.fixed_elements{ position:fixed; top:100px; }
        #top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
        ul{ padding: 0; margin: 0; }
        .fixed-bar-buttons{ float: left;color: #fff; }
        .fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
        .fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
        .fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
        #content-panel{ float: left;margin-top: 40px; }
</style>
</head>

<body>
 <div id="top-floating-bar">
        <div class="fixed-bar-buttons">
            <ul class="nav">
                <li><a href="#section2">REFERENCIE</a></li>
                <li><a href="#section3">KONTAKT</a></li>
            </ul>
        </div>
    </div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...

The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.

When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!



Solution :

Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.

There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P


    CSS Howto..

    How to DRY up on SASS transitions with multiple elements?

    How to center a group of images in HTML/CSS?

    How to Prevent Browsers from Caching CSS Files?

    how to position element equally from left and right sides?

    How to do line animation using CSS and SVG

    How to get a CSS selector in PHP?

    Rails - how to place text onto an image within a code loop

    How to change color of button in active state using inline CSS?

    How to center Nav Bar CSS

    How can I center my ul li list inside my div?

    How to get the scroll bar with CSS overflow on iOS

    How to achieve disorganised bubble layout with html css?

    CSS How to make text to scale like an image

    How can I add shading to edges of the default ASP.NET page?

    How to override CSS? [closed]

    How do I get the height to the full page height?

    How to control a

    Learning Bootstrap Thumbnails…why is that bullet showing?

    Using CSS, how can I get the pseudo-class 'empty' on Element B to affect the styling of Element A?

    How to make a linear-gradient to fulfill two-coloured body in CSS

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    How to fade gradient, image or texture as background?

    How to give shadow to a border

    How to render checked checkboxes using CSS alone?

    How to create dynamic CSS class in in extjs or javascript

    How to align navigation links after navigation menu is collapsed using bootstrap

    CSS How to make element in the middle to shrink before its sibling jumps down

    How to assign css for prettify(syntax highlighter)

    How to fix this css float problem?

    How to apply a CSS 3 blur filter to a background image