在WordPress中创建一个粘性的社交栏
Create a Sticky Social Bar in WordPress
我正在为WordPress主题制作粘性社交栏。问题是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');
}
};
}
PHP代码也在我的single.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() ?>&media=<?php echo esc_url( $featured_img ); ?>&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&url=<?php echo wp_get_shortlink() ?>&title=<?php echo urlencode( get_the_title() ) ?>&summary=<?php echo urlencode( wp_strip_all_tags( get_the_excerpt() )) ?>&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() ?>&title=<?php echo urlencode( get_the_title() ) ?>&summary=<?php echo urlencode( wp_strip_all_tags( get_the_excerpt() )) ?>&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>
CSS也在下面给出,在我的style.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;
}
我只是想知道我在哪里出错了。分享按钮在帖子中正确显示,但不会随着帖子内容滚动。
请帮我解决这个问题。谢谢大家:)
添加position:fixed;
到.article-sharer
:
.article-sharer {
padding: 0;
position:fixed;
}
<标题> JSFiddle 标题>相关文章:
- Wordpress在播放器旁边播放一个自定义的下载按钮,而不是下载
- 我想每隔10秒刷新一个wordpress网站
- 如何使一个简单的HTML文件成为wordpress中可用的页面
- Wordpress-我应该将脚本分为特定的页面还是有一个主js文件
- Wordpress创建一个自定义休息服务
- 有没有一个Wordpress插件可以让我展示HTML/JS/CSS的例子
- 有没有一个wordpress插件来制作这样的幻灯片
- 需要建议为wordpress博客作者创建一个随机名称
- 在WordPress中添加一个Highchart
- Wordpress jQuery 脚本不会在具有 jQuery.noConflict 用法的一个实例上启动
- 在一个js文件中为不同的wordpress页面添加多个自定义脚本
- 创建一个像 WordPress 一样读取模式的正则表达式
- Wordpress 当我包含一个特殊的字符串时不会解析 JSON
- 这个JavaScript能在一个WordPress页面中处理多个显示/隐藏吗
- 限制访问一个页面在一个Wordpress网站只为特定的参考
- 无论如何,我可以在一个Wordpress页面创建一个RSS提要
- 试图嵌入一个自定义javascript谷歌地图到一个wordpress网站
- 我的第一个WordPress插件-Can'无法运行脚本
- 一个Wordpress插件可以转换为使用在非WP网站
- 如何加载一个引导模态只需点击一个wordpress插件子菜单