2

私は周りを検索していくつかの解決策を試しましたが、何もうまくいきません。ここにある「デモをスケジュールする」ボタンと同様の機能を複製しようとしています: www.bamboohr.com

現在、次のhtml、css、およびjavascriptがあります。jsfiddle では問題なく動作するようですが、WordPress の子テーマに実装するとうまくいきません。html を子テーマの header.php に貼り付け、css をカスタム スタイルシートに貼り付け、javascript を header.php にリンクされた別のファイルからロードしました。

誰かがこれが機能しない理由を理解するのを手伝ってもらえますか?

これはメインコンテンツの直前です<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 に答える