仅显示客户服务功能页面底部的移动视图和滚动条

Question

我正在尝试在页面底部的移动视图和滚动条上显示客户服务功能（电子邮件、联系人和电话）。为此，我尝试了下面的代码但没有成功。有时有效有时无效。

我的代码是：

<div id="mobile_footer" class="mobile_footer">
    <div class="sticky_class">
        <div class="sticky_class_email">
            <a href="mailto:ecommerce@vlcsolutions.com">
                <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>

样式

.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代码

<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>

建议我如何以正确的方式进行。它应该只显示在页面底部 80% 以上的移动视图和滚动条上。

Answer 1

您正在寻找这样的东西吗？

为了便于解释，我删除了 window 调整大小处理程序:)

$(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:ecommerce@vlcsolutions.com">
        <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>

仅显示客户服务功能页面底部的移动视图和滚动条

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

html

javascript

css

feature-detection