0

I want to hide a top header when i scroll the page in the mobile device which has social icon. page url: http://gomodemo.se/port73/ I have tried following code:

code 1.

<script>
jQuery(window).scroll(function ($) {
  var Bottom = $(window).height() + $(window).scrollTop() >= $(document).height();
if(Bottom )
{
$('#header_meta').hide();
}
});
</script>

code 2.

<script>
jQuery("window").scrollDown(function($){
    $("#header_meta").hide();
});
</script>
Rashmi Sonke
  • 75
  • 10
  • Better to use CSS media queries, this might help you http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Satpal Feb 03 '17 at 09:21
  • agreed but i have to hide the div on scroll . When i load the site in the mobile device, I want the div to appear but on scroll want the div to hide. – Rashmi Sonke Feb 03 '17 at 09:26
  • Why don't you use a media query which change the `position: fixed` ?? – AymDev Feb 03 '17 at 09:27

1 Answers1

0
@media only screen and (max-width: 767px)
.responsive #header .social_bookmarks {
    padding-bottom: 2px;
    width: 100%;
    text-align: center;
    height: auto;
    line-height: 0.8em;
    margin: 0;
    display: none;
}

enter link description here

enter the display:none in media queries

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Kondal
  • 2,870
  • 5
  • 26
  • 40