Question

我已经四处寻找并尝试了几种解决方案，没有任何对我有用。我试图复制类似的功能到这里看到的“安排演示”按钮：www.bamboohr.com

我目前有以下html，css和javascript。它似乎在jsfiddle中工作得很好，但是当我将它实现到我的WordPress子主题中时却没有。我已将html粘贴到我的子主题的header.php中，将css粘贴到自定义样式表中，并从header.php中链接的另一个文件中加载javascript。

有人可以帮我弄清楚为什么这不起作用吗？

这是在主要内容<div>：

之前

    <div class="askFloater">
      <a href="http://workforcematters.hubicle.com" target="_blank">
        <i class="icon-question-sign"></i><br />
        Ask Us Anything
      </a>
    </div>

这会加载到<head>部分：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://dev.workforcematters.com/wp-content/themes/swatch-child-theme/javascripts/askFloater.js"></script>

这在样式表中：

.askFloater {
display: none;
position: fixed;
bottom: 20px;
right: 0;
width: 70px;
height: 100px;
text-align: center;
background-color: #3498db;
border-radius: 3px 0 0 3px;
padding: 16px 16px 0;
z-index: 1;
}

.askFloater a {
color: #fff;
font-size: 18px;
text-transform: lowercase;
font-family: 'Muli', 'Lucida Grande', sans-serif;
}

.askFloater:hover {
background-color: #4ea5db;
}

这是在“askFloater.js”文件中：

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
    $('.askFloater').fadeIn();
} else {
    $('.askFloater').fadeOut();
}

});

Answer 1

编辑：也许您可以在主题JS中与现有的$(window).scroll()结合使用：

// Function that changes the class of the fixed header after some scrolling
function navbarScroll() {
    var header = $(".navbar-inner");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 230) {
            header.addClass("navbar-scrolled");
        } else {
            header.removeClass("navbar-scrolled");
        }

        if (scroll > 800) {
            $('.askFloater').fadeIn();
        } else {
            $('.askFloater').fadeOut();
        }
    });
}

导致修复div使用javascript滚动显示/隐藏

1 个答案: