Search code examples
javascripthtmlcssfeature-detection

Showing customer care feature only Mobile view and scroll bar in bottom of the page

I'm trying to show the Customer Care Feature(Email, Contact, and Call)on Mobile view and scrollbar in the bottom of the page. For this, I tried below code but not get success. Sometimes it's working and sometimes not.

My Code is:

<div id="mobile_footer" class="mobile_footer">
    <div class="sticky_class">
        <div class="sticky_class_email">
            <a href="mailto:[email protected]">
                <img src="footer_image/Message.png"/>
            </a>
        </div>
        <div class="sticky_class_contact_us">
            <a href="./contactus.php">
                <img src="footer_image/MAN.png"/>
            </a>
        </div>
        <div class="sticky_class_phone">
            <a href="tel:16304479852">
                <img src="footer_image/PHONE.png"/>
            </a>
        </div>
    </div>
</div>

Styles

.mobile_footer{
    width: 100%;
  /*  display: none; */
}

@media only screen and (max-width: 768px){

    .mobile_footer{
        width: 100%;
       /* display: initial !important;*/
        background-color: #003158;
    }

    .sticky_class{
        width: 100%;
        padding: 0px;
        position: fixed;
        bottom: 0;
        background-color: #046d9f;
        height: 65px !important;
        z-index: 1;
    }

    .sticky_class_email{
        width: 32%;
        float: left;
        margin-left: 10px;
        margin-top: 7px;
    }

    .sticky_class_contact_us{
        width: 32%;
        float: left;
        margin-top: 7px;
    }

    .sticky_class_phone{
        width: 32%;
        float: left;
        margin-top: 7px;
    }

}

Javascript Code

<script type="application/javascript">

    $(document).ready(function(){

        window.onscroll = myScroll;
        var counter = 0; // Global Variable
        function myScroll(){
            console.log('pageYOffset = ' + window.pageYOffset);
            if(counter == 0){
                if(window.pageYOffset > 300){
                    counter++;
                }
            }
        }
        $(window).resize(function(e) {
            if ($(window).width() <= 800 && window.pageYOffset >= 3900) {
                $('body').append("<style type='text/css'>.mobile_footer{display: initial !important;}</style>");
            }else{
                $('body').append("<style type='text/css'>.mobile_footer{display: none;}</style>");
            }
        });
    $(window).resize(); // call once for good measure!
    });

</script>

enter image description here

Suggest me how to do it the proper way. It should show only on Mobile View and Scrollbar above 80% of bottom of the page.

Solution

  • You looking For Something like this ?

    I stripped the window resize handler for the sake of this explanation :)

    $(document).ready(function() {

  window.onscroll = myScroll;

  function myScroll() {
    // 0.7 can be calculated to your desired percentage.
    if (window.pageYOffset > document.body.clientHeight * 0.7) {
      
      $('.mobile_footer').addClass('block');
    } else {
      $('.mobile_footer').removeClass('block');
    }
  }
});
    .mobile_footer {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .block {
    display: block !important; /* style to add when scrolling goes above 80%*/
  }
  .mobile_footer {
    width: 100%;
    display: none; /*Hide footer by default*/
    background-color: #003158;
  }
  .sticky_class {
    width: 100%;
    padding: 0px;
    position: fixed;
    bottom: 0;
    background-color: #046d9f;
    height: 65px !important;
    z-index: 1;
  }
  .sticky_class_email {
    width: 32%;
    float: left;
    margin-left: 10px;
    margin-top: 7px;
  }
  .sticky_class_contact_us {
    width: 32%;
    float: left;
    margin-top: 7px;
  }
  .sticky_class_phone {
    width: 32%;
    float: left;
    margin-top: 7px;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div id="mobile_footer" class="mobile_footer">
  <div class="sticky_class">
    <div class="sticky_class_email">
      <a href="mailto:[email protected]">
        <img src="footer_image/Message.png" />
      </a>
    </div>
    <div class="sticky_class_contact_us">
      <a href="./contactus.php">
        <img src="footer_image/MAN.png" />
      </a>
    </div>
    <div class="sticky_class_phone">
      <a href="tel:16304479852">
        <img src="footer_image/PHONE.png" />
      </a>
    </div>
  </div>
</div>