我在网页的侧面有一个固定的社交媒体栏。我试图在首次加载wbepage时使其隐藏，然后向下滚动一定长度后出现。
(function ($) {
'use strict';
// Main function
$.contactButtons = function( options ){
// Define the defaults
var defaults = {
effect : '', // slide-on-scroll
buttons : {
'facebook': { class: 'facebook', use: false, icon: 'facebook', link: '', title: 'Follow on Facebook' },
'google': { class: 'gplus', use: false, icon: 'google-plus', link: '', title: 'Visit on Google Plus' },
'linkedin': { class: 'linkedin', use: false, icon: 'linkedin', link: '', title: 'Visit on LinkedIn' },
'twitter': { class: 'twitter', use: false, icon: 'twitter', link: '', title: 'Follow on Twitter' },
'pinterest': { class: 'pinterest', use: false, icon: 'pinterest', link: '', title: 'Follow on Pinterest' },
'phone': { class: 'phone', use: false, icon: 'phone', link: '', title: 'Call us', type: 'phone' },
'email': { class: 'email', use: false, icon: 'envelope', link: '', title: 'Send us an email', type: 'email' }
}
};
// Merge defaults and options
var s,
settings = options;
for (s in defaults.buttons) {
if (options.buttons[s]) {
settings.buttons[s] = $.extend( defaults.buttons[s], options.buttons[s] );
}
}
// Define the container for the buttons
var oContainer = $("#contact-buttons-bar");
// Check if the container is already on the page
if ( oContainer.length === 0 ) {
// Insert the container element
$('body').append('<div id="contact-buttons-bar">');
// Get the just inserted element
oContainer = $("#contact-buttons-bar");
// Add class for effect
oContainer.addClass(settings.effect);
// Add show/hide button
var sShowHideBtn = '<button class="contact-button-link show-hide-contact-bar"><span class="fa fa-angle-left"></span></button>';
oContainer.append(sShowHideBtn);
var i;
for ( i in settings.buttons ) {
var bs = settings.buttons[i],
sLink = bs.link,
active = bs.use;
// Check if element is active
if (active) {
// Change the link for phone and email when needed
if (bs.type === 'phone') {
sLink = 'tel:' + bs.link;
} else if (bs.type === 'email') {
sLink = 'mailto:' + bs.link;
}
// Insert the links
var sIcon = '<span class="fa fa-' + bs.icon + '"></span>',
sButton = '<a href="' + sLink +
'" class="contact-button-link cb-ancor ' + bs.class + '" ' +
(bs.title ? 'title="' + bs.title + '"' : '') +
(bs.extras ? bs.extras : '') +
'>' + sIcon + '</a>';
oContainer.append(sButton);
}
}
// Make the buttons visible
setTimeout(function(){
oContainer.animate({ left : 0 });
}, 200);
// Show/hide buttons
$('body').on('click', '.show-hide-contact-bar', function(e){
e.preventDefault();
e.stopImmediatePropagation();
$('.show-hide-contact-bar').find('.fa').toggleClass('fa-angle-right fa-angle-left');
oContainer.find('.cb-ancor').toggleClass('cb-hidden');
});
}
};
// Slide on scroll effect
$(function(){
// Define element to slide
var el = $("#contact-buttons-bar.slide-on-scroll");
// Load top default
el.attr('data-top', el.css('top'));
// Listen to scroll
$(window).scroll(function() {
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
var nTop = $(window).scrollTop() + parseInt(el.attr('data-top'));
el.animate({
top : nTop
}, 500);
}, 250) );
});
});
}( jQuery ));
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
// Initialize Share-Buttons
$.contactButtons({
effect : 'slide-on-scroll',
buttons : {
'facebook': { class: 'facebook', use: true, link: 'javascript:void(0)', extras: 'target="_blank"' },
'linkedin': { class: 'linkedin', use: true, link: 'javascript:void(0)' },
'twitter': { class: 'twitter', use: true, link: 'javascript:void(0)' },
// 'phone': { class: 'phone separated', use: true, link: '+000' },
// 'email': { class: 'email', use: true, link: 'test@web.com' }
}
});
#contact-buttons-bar {
position: fixed;
top: 120px;
left: -50px;
width: 50px;
}
#contact-buttons-bar.slide-on-scroll {
position: absolute;
}
.contact-button-link {
display: block;
width: 50px;
height: 50px;
padding: 0;
margin-bottom: 1px;
text-align: center;
line-height: 50px;
font-size: 22px;
background: #8e8e93;
color: #fff;
position: relative;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
}
.contact-button-link:hover,
.contact-button-link:focus,
.contact-button-link:active {
color: #fff;
padding-left: 20px;
width: 70px;
}
.contact-button-link.cb-hidden {
left: -50px;
}
.contact-button-link.facebook {
background: #3b5998;
}
.contact-button-link.linkedin {
background: #0077b5;
}
.contact-button-link.gplus {
background: #db4437;
}
.contact-button-link.separated {
margin-top: 1em;
}
.show-hide-contact-bar,
.contact-button-link.show-hide-contact-bar:focus,
.contact-button-link.show-hide-contact-bar:active {
background: transparent;
color: #000;
border: 0;
outline: 0;
padding: 0;
width: 50px;
}
.contact-button-link.show-hide-contact-bar:hover {
color: #000;
background: #ccc;
padding: 0;
width: 50px;
}
body {
font-family: 'Lato', sans-serif;
font-size: 16px;
max-width: 550px;
margin: 4em auto;
line-height: 1.7;
}
h1 {
text-transform: uppercase;
font-weight: 300;
margin: 0 0 1em;
text-align: center;
}
h1 span {
font-weight: 700;
display: block;
}
p + p {
margin-top: 1.5em;
}
.git {
background: #000;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Contact Buttons Plugin Demo</title>
<meta name="description" content="Share-Buttons is a plugin based on jQuery to add share and contact buttons to your website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<h1>jQuery Contact Buttons Plugin Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula nisi, rutrum imperdiet tincidunt egestas, convallis vitae tellus. Fusce eleifend enim erat, ac consectetur felis consequat a. Etiam gravida lacinia est feugiat dictum. Phasellus feugiat vulputate magna. Aenean faucibus, erat vel tempor lobortis, ligula metus maximus ligula, sed bibendum augue turpis id erat. Nulla facilisi. Praesent eget libero pretium, dictum lacus ac, lacinia orci. Morbi condimentum scelerisque dui, eu pellentesque nunc lobortis id. Suspendisse vitae odio volutpat enim vestibulum efficitur vitae vel neque. Cras commodo mi quis nulla pharetra efficitur. Cras at massa sed enim fringilla dictum. Curabitur et tellus eget mi mollis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sed arcu rutrum arcu maximus rhoncus. Integer massa urna, consequat nec rhoncus eu, imperdiet in tortor. Nunc lectus arcu, scelerisque id turpis et, auctor convallis ipsum.</p>
<p>Pellentesque bibendum lectus quis nibh bibendum, nec pretium quam porttitor. Sed dignissim placerat tempus. Morbi cursus vel ex sit amet cursus. Nunc eget arcu facilisis, tristique turpis vitae, posuere quam. Nulla dictum lobortis diam ac lacinia. Donec a justo condimentum, vehicula ligula quis, condimentum sapien. Mauris tempor euismod velit vitae porta. Nunc feugiat, quam sit amet gravida congue, nulla augue ultrices lacus, quis sodales turpis nisl nec mi. Suspendisse non quam et lorem mattis commodo egestas non orci. Praesent non imperdiet mauris. In vestibulum ligula eget mi egestas tincidunt. Vestibulum auctor est nec ante egestas facilisis. Sed imperdiet, nulla at imperdiet egestas, orci neque volutpat arcu, ac mattis est sem vel nulla. Aenean auctor nibh nec leo tristique volutpat. Sed sem mauris, gravida quis ultricies eget, congue sit amet elit.</p>
<p>Donec lobortis eu velit nec sagittis. Suspendisse quis erat ac dui rhoncus feugiat. Maecenas lobortis, sapien vel porttitor laoreet, libero massa efficitur massa, vel dapibus tortor nisl id lectus. Morbi turpis enim, dictum quis viverra vitae, ultricies ut augue. Sed eu nibh ac lacus imperdiet malesuada vel non odio. Praesent et lectus elit. Donec risus ligula, sagittis quis consectetur aliquam, luctus feugiat ex. Donec scelerisque enim in purus faucibus congue. Maecenas sit amet aliquet enim, at condimentum arcu. In sit amet tristique quam. Mauris ac elit at nunc luctus tempor non in odio. Mauris ornare, neque ut accumsan mollis, turpis ante eleifend lacus, at varius libero orci nec magna.</p>
<p>Suspendisse bibendum nibh ex, imperdiet ullamcorper leo volutpat at. Vivamus congue suscipit elit, eu pulvinar mi tristique ut. Morbi vitae massa vitae erat ornare consectetur. Vestibulum sed lacus et diam mollis lobortis. Curabitur ultrices felis ipsum, ut laoreet dolor posuere eu. Etiam sed est id urna scelerisque malesuada. Aenean turpis ipsum, pellentesque tristique ipsum sit amet, hendrerit luctus diam. Nunc eget consectetur ipsum. Proin bibendum porttitor quam.</p>
<p>Etiam condimentum ullamcorper elementum. Fusce fermentum at sem non feugiat. Aenean vitae purus luctus, laoreet lorem quis, consequat elit. Donec nulla libero, gravida et hendrerit a, porta non risus. Sed commodo id velit ut molestie. Pellentesque vulputate sit amet nulla at fringilla. Morbi blandit maximus est, vitae tempor quam sollicitudin aliquam. Ut rhoncus nunc at quam mollis, non accumsan augue pellentesque. Etiam scelerisque metus in metus ornare, non iaculis nunc vestibulum. In condimentum dui non mollis faucibus. Etiam a tortor aliquet, mattis ante vel, ullamcorper lectus. Aliquam tortor purus, dapibus id pharetra eu, posuere vehicula tortor. Cras interdum consectetur fringilla. Nam et efficitur neque, vel iaculis eros. Proin interdum, augue vitae maximus sollicitudin, massa ligula lobortis augue, congue hendrerit turpis tortor non ligula. Maecenas non enim neque.</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
这是我正在使用的插件。 我尝试过
$(function() {
$('.contactButtons').hide();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) { $('.contactButtons').fadeIn();
} else { $('.contactButtons').fadeOut();
}
});
})
但是没有用。我没有在代码段中包含该内容，因为它不起作用。我将继续尝试修复它，但是如果有人可以将我推向正确的方向，那就太好了。
答案 0 :(得分：0)
将.contactButtons更改为＃contact-buttons-bar