2

我已经四处搜索并尝试了几种解决方案，但没有什么对我有用。我正在尝试复制与此处看到的“安排演示”按钮类似的功能：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();
}

});
4

1 回答 1

0

编辑：也许你可以结合你现有$(window).scroll()的主题 JS：

// 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();
        }
    });
}
于 2013-09-20T04:42:13.060 回答