JSFiddle

Question

我正在为WordPress主题制作Sticky Social Bar。问题是div没有滚动内容。 JS，CSS和PHP中的代码如下所示。

我在WordPress function.php

中注册了脚本

wp_register_script('topnews', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '', true);
wp_enqueue_script('topnews');

我想告诉你，这个JS文件中的所有其他代码都完美无缺。在scripts.js中我放了这段代码：

function sticky_share()
{
    "use strict";
    var sharerbar = $('.article-sharer');
    var dummyblock = $('.dummy-share-block');
    var sharetop = 0;

    var sticky_share_bar = function()
    {
        var toppos = $(window).scrollTop();

        if (toppos > sharetop) {
            if ($('.article-sharer-placeholder').length > 0) $('<div class="article-sharer-placeholder"></div>').insertBefore(sharerbar);
            sharerbar.addClass('fixed');
            dummyblock.addClass('fixed');
        } else {
            $('.article-sharer-placeholder').remove();
            sharerbar.removeClass('fixed');
            dummyblock.removeClass('fixed');
        }
    };

}

下面还给出了我的single.php文件中的PHP代码

    <section class="article-sharer section container clearfix">
    <div class="socials-share">
        <a target="_blank" data-shareto="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo wp_get_shortlink() ?>" class="social-share share-facebook">
            <i class="fa fa-facebook"></i><span class="share-text">Share to Facebook</span>
        </a>
        <a target="_blank" data-shareto="Twitter" href="https://twitter.com/home?status=<?php echo urlencode($posttitle . ". " . esc_url( wp_get_shortlink() )); ?>" class="social-share share-twitter">
            <i class="fa fa-twitter"></i><span class="share-text">Share to Twitter</span>
        </a>
        <a target="_blank" data-shareto="Google" href="https://plus.google.com/share?url=<?php echo wp_get_shortlink() ?>" class="social-share share-google-plus">
            <i class="fa fa-google-plus"></i>
        </a>
        <a target="_blank" data-shareto="Pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo wp_get_shortlink() ?>&amp;media=<?php echo esc_url( $featured_img ); ?>&amp;description=<?php echo urlencode( get_the_title() ); ?>" class="social-share share-pinterest">
            <i class="fa fa-pinterest"></i>
        </a>
        <a target="_blank" data-shareto="Linked In" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo wp_get_shortlink() ?>&amp;title=<?php echo urlencode( get_the_title() ) ?>&amp;summary=<?php echo urlencode( wp_strip_all_tags( get_the_excerpt() )) ?>&amp;source=<?php echo urlencode( get_bloginfo( 'name' ) ) ?>" class="social-share share-linkedin">
            <i class="fa fa-linkedin"></i>
        </a>
        <a target="_blank" data-shareto="VK" href="http://vkontakte.ru/share.php?url=<?php echo wp_get_shortlink() ?>&amp;title=<?php echo urlencode( get_the_title() ) ?>&amp;summary=<?php echo urlencode( wp_strip_all_tags( get_the_excerpt() )) ?>&amp;source=<?php echo urlencode( get_bloginfo( 'name' ) ) ?>" class="social-share share-vk">
            <i class="fa fa-vk"></i>
        </a>
    </div>
    <div class="article-shorturl">
        <input type="text" id="shorturl" class="shorturl" data-clipboard-text="<?php echo wp_get_shortlink() ?>" value="<?php echo wp_get_shortlink() ?>">
    </div>
</section>
<div class="dummy-share-block"></div>

下面还给出了我的style.css文件中的CSS：

.article-sharer {
    padding: 0;
}
.article-sharer-placeholder {height: 160px;}
.article-sharer.fixed {
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 0;
    margin-left: -1px;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.dummy-share-block {
    height: 61px;
    width: 100%;
    display: none;
    position: relative;
    content: " ";
}
.dummy-share-block.fixed {
    display: block;
}

.socials-share {
    padding: 10px 0 10px 30px;
    float: left;
}
.article-sharer .social-share {
    font-size: 13px;
    margin-right: 5px;
    border-radius: 3px;
    display: inline-block;
    color: #fff;
    padding: 8px 0;
    min-width: 38px;
    text-align: center;
    background: #333;
}
.social-share .fa {font-size: 16px;color: #fff;}
.social-share.share-facebook, .social-share.share-twitter {color: #fff;padding: 8px 16px;}
.social-share.share-facebook .fa, .social-share.share-twitter .fa {margin-right: 8px;}
.social-share.share-facebook { background: #2980b9; }
.social-share.share-twitter { background: #00bff0; }
.social-share.share-google-plus { background: #e74c3c; }
.social-share.share-linkedin { background: #0087c3; }
.social-share.share-reddit { background: #373737; }
.social-share.share-pinterest { background: #CA2128; }

.article-shorturl {
    float: right;
    border-left: 1px solid #e5e5e5;
    padding: 0px 30px;
    line-height: 59px;
}
.article-shorturl input {
    height: 34px;
    line-height: 34px;
    width: 160px;
}

我只是想知道我在哪里犯了错误。共享按钮在帖子中正确显示，但不能滚动显示帖子内容。

请帮我解决这个问题。感谢所有人：）

Answer 1

将for(i in 2:ncol(df)) cor.test(df$SEASON, df[, i], method="spearman")添加到position:fixed;：

.article-sharer

在WordPress中创建一个粘滞的社交栏

1 个答案:

JSFiddle