CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan
Dan

Reputation: 589

How can I hide a button when scrolled to the top of a page?

I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.

I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page

var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');

$ccol.scroll(function(){
    $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});

However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?

Upvotes: 0

Views: 6486

Answers (4)

sandesh jadhav
sandesh jadhav

Reputation: 119

This should do the job:

$(window).scroll(function(e){
    if ($(this).scrollTop() > 0) {
        $(".your_element").css("display", "block");
    } else {
        $(".your_element").css("display", "none");
    }
});

Upvotes: 0

Alex
Alex

Reputation: 5278

  1. You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.

  2. Write the one line of CSS you need, which is to hide the element from the beginning

    .toggle-menu-wrap { display: none; }

  3. Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:

    jQuery(document).ready(function() { 
    fadeMenuWrap(); 
    jQuery(window).scroll(fadeMenuWrap);
});

function fadeMenuWrap() { 
    var scrollPos = window.pageYOffset || document.documentElement.scrollTop; 
    if (scrollPos > 300) { 
        jQuery('.toggle-menu-wrap').fadeIn(300); 
    } else { 
        jQuery('.toggle-menu-wrap').fadeOut(300); 
    } 
}

Upvotes: 2

royhowie
royhowie

Reputation: 11171

Like @murli2308 said in the comments above, you need to attach a scroll event listener to the window:

$(document).ready(function () {
    var $scb = $('<div class="scroll-border"></div>');
    $('.above').append($scb);
    var $ccol = $('.content');

    $(window).scroll(function(){
        $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
    });
})

Wrapping your code in $(document).ready() would also be a good idea.

The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:

.content{
    height: 200px;
    width: 200px;
    overflow: auto;
}

Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).

Upvotes: 1

Nandan Bhat
Nandan Bhat

Reputation: 1563

You might have forgotten to link Jquery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Link this inside your head tag incase.....

Upvotes: 0

Related Questions