在特定屏幕宽度下隐藏JS函数

Question

I'm using a jQuery plugin for a fixed social media bar on my website. The bar overlaps content on the website when in mobile, so I'm trying to hide the bar completely on mobile view.

Answer 1

It is much easier to do that using CSS and a media query, eg

 @media screen and (max-width: 700px) { .contactButton { display: none; } } 

 <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> 

---

If you need to use script, here is one way

 window.onresize = function() { if (window.innerWidth < 700) { $(".contactButton").hide(); } else { $(".contactButton").show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> 

---

Updated after a comment/question edit

Here is an update of your newly posted code sample, where I added 1 rule and 1 property to your CSS (see comments in the CSS)

Stack snippet

 (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 { /* added, to intially hide it */ display: none; } @media screen and (min-width: 768px) { #contact-buttons-bar { display: block; /* added, to unhide it */ 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>