Question

我正在将jQuery插件用于网站上的固定社交媒体栏。在移动设备上，该栏与网站上的内容重叠，因此，我试图在移动视图中完全隐藏该栏。

Answer 1

使用CSS和媒体查询（例如

）来完成此操作要容易得多。

@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>

如果您需要使用脚本，这是一种方法

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>

在评论/问题编辑后更新

这是您新发布的代码示例的更新，我在CSS中添加了1条规则和1个属性（请参见CSS中的注释）

堆栈片段

(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>

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

1 个答案: