0

I am having real difficulty getting a jQuery show/hide on scroll to run only on desktop viewports.

Try as I might, I cannot get the hide function to cease working once the screen is mobile.

I have already tried writing the function utilising using a CSS media query so that it only works in the presence of a display: none, building on @Andrews comment below.

I can't simply use show/hide via a media query as suggested in comments. Because I need the two variations of the desktop header. 

   $(document).ready(function () {
     $(window).scroll( function() {
         if( $(this).scrollTop() > 0 ) {
             $(".middle-tier, .top-tier-menu-bar ").hide();}
         else {$(".middle-tier, .top-tier-menu-bar").show();}
                });
         }); 


   
   
   
   
    
.placeholder-style{
        background-color: lightblue;
        border: 2px solid blue;
        padding: .3em;
        text-align: center;
        margin: .5em;
    }
    
    .logo{
       width: 100px;
    }

    .top-tier-menu-bar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .mobile-nav-extra-widgets{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .middle-tier{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .right-icons{
        display: flex;
        flex-direction: row;
        justify-content:space-around; 
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    li {
    display: inline;
    padding: 2em;
    
    }
    
    .header{
        position: sticky;
        overflow: hidden;
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        background-color: aliceblue;
    }
    
   .page-contents{margin-top:250px;}
    
    @media (min-width:500px)  { 
       .header{position:fixed;}
    }
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>

<div class = "header">
<!--Top tier menu starts-->
<div class="top-tier-menu-bar">
    
    <div class="trust-pilot-widget placeholder-style">
    <span>TrustPilot Widget</span>
    </div>

    <div class="click-to-call placeholder-style">
    <span>Phone number</span>
    </div>
    
</div>

<div class = "middle-tier">
    <div class ="search-icon placeholder-style">Search</div>
    <div class = "central-logo placeholder-style logo">Logo</div>
    <div class ="right-icons placeholder-style">
        <div class = "user placeholder-style">User</div>
        <div class = "cart placeholder-style">Cart</div>
    </div>
</div>

<div class="nav">
    <ul class="placeholder-style">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

</div>
</div>
    
<div class="page-contents">

<div id="mobile-viewport-detect">test</div>
    
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>

<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
    
<p class="placeholder-style" style="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>    

</div>
    </body>

I have now made a fiddle to fully demonstrate the context and how it is working currently. Would really appreciate a tip here.

Thank you friends.

hypothesia
  • 5
  • 4
  • Welcome to Stack Overflow! Check out the question [What is the best way to detect a mobile device in jQuery](https://stackoverflow.com/q/3514784/5764553). I think that [Gonçalo Peres's answer](https://stackoverflow.com/a/10364620/5764553) is what you're looking for. – Andrew Myers Mar 30 '19 at 20:11
  • Why not just show/hide depending on viewport? – Dimitri Kopriwa Mar 30 '19 at 21:30
  • @AndrewMyers thank you, I tried this but it did not work. It ran the same, even with the media query as the function trigger. – hypothesia Mar 31 '19 at 20:03
  • Can you share the code when you were trying Gonçalo Peres's answer? I tested it with your code a couple days ago and I thought it worked. If it isn't working for you, there might be something else going on, like maybe the media query needs to be adjusted. – Andrew Myers Apr 01 '19 at 23:50
  • Thats very kind @AndrewMyers. I will update in the next day or so. Appreciate you following up. – hypothesia Apr 02 '19 at 10:04

0 Answers0