我有一个固定的社交媒体栏，它位于网页的一侧。我试图在第一次加载 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();
}
});
})
但是没有用。我没有在代码片段中包含它，因为它不起作用。我会继续尝试修复它，但如果有人能插入我朝着正确的方向前进，那就太棒了。
最佳答案
将您的 .contactButtons 更改为 #contact-buttons-bar
关于javascript - 隐藏固定的社交媒体栏，直到在网页上向下滚动一定长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51195730/