如何使菜单中的所有项目都具有粘性？

Question

我正在尝试向我的网站添加一个菜单栏，它看起来几乎是我想要的样子，左边是汉堡包，右边是两个联系信息。然而，只有汉堡包是粘的。此外，我想为菜单添加背景颜色，以便在滚动网页时，粘性位整齐地位于彩色条内。我该如何进行这些更改？

nav {
  margin: 0;
  padding: 0px;
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: inherit;
}

#menuToggle {
  display: inline-block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: yellowgreen;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}


/*
       * Just a quick hamburger
       */

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}


/* 
       * Transform all the slices of hamburger
       * into a crossmark.
       */

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


/*
       * But let's hide the middle one.
       */

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


/*
       * Ohyeah and the last one should go the other direction
       */

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}


/*
       * Make this absolute positioned
       * at the top left of the screen
       */

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  padding-bottom: 325px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 8px 0;
  font-size: 20px;
}


/*
       * And let's slide it in from the left
       */

#menuToggle input:checked~ul {
  transform: none;
}


/* header-right  */

.header-right li {
  display: inline-block;
  margin-right: 50px;
  margin-top: 45px;
  font-size: 16px;
  text-decoration: none;
  float: right;
  font-family: inherit;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.header-right li i {
  margin-right: 7px;
  color: #888;
  text-decoration: none;
}

.header-right li :hover {
  color: #7370d8;
  text-decoration: none;
}


/*
       * Subscription form for newsletter
       */

.subscribe-form input[type="text"] {
  padding: 13.225px 30px;
  border: none;
  background: #f2f2f2;
  float: none;
}

.subscribe-form input[type="submit"] {
  background: #9bf55f;
  color: #fff;
  padding: 16px 24px;
  border: none;
  font-size: 18px;
  float: none;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>My website</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="css/ie/html5shiv.js"></script>
    <![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.poptrox-2.2.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/init.js"></script>
  <noscript>
    <link rel="stylesheet" href="css/skel-noscript.css">
    <link rel="stylesheet" href="css/style.css">
    </noscript>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie/v8.css">
    <![endif]-->

</head>

<body>
  <nav role="navigation">
    <div id="menuToggle">

      <input type="checkbox" />


      <span></span>
      <span></span>
      <span></span>


      <ul id="menu">
        <a href="index.html">
          <li>Home</li>
        </a>
        <a href="about-us.html">
          <li>My listings</li>
        </a>
        <a href="https://selar.co/vmo2" target="_blank">
          <li>Bookings</li>
        </a>
        <a href="faq.html">
          <li>FAQ</li>
        </a>
      </ul>
    </div>
    <div class="header-right">
      <ul class="pull-right">
        <li>
          <a href="#">
            <i class="fa fa-phone"></i> +5558976555
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-envelope"></i>mylistings@gmail.com
          </a>
        </li>
      </ul>
    </div>

新增：Js（不止一个，我觉得是这个？）

/* poptrox 2.2 | n33.co | MIT/GPLv2 */

(function(jQuery) {

    jQuery.fn.poptrox_disableSelection = function() { return jQuery(this).css('user-select', 'none').css('-khtml-user-select', 'none').css('-moz-user-select', 'none').css('-o-user-select', 'none').css('-webkit-user-select', 'none'); }

    jQuery.fn.poptrox = function(options) {

        // Settings

            var settings = jQuery.extend({
                    preload:                        false,                          // If true, preload fullsize images in the background
                    baseZIndex:                     1000,                           // Base Z-Index
                    fadeSpeed:                      300,                            // Global fade speed
                    overlayColor:                   '#000000',                      // Overlay color
                    overlayOpacity:                 0.6,                            // Overlay opacity
                    windowMargin:                   50,                             // Window margin size (in pixels; only comes into play when an image is larger than the viewport)
                    windowHeightPad:                0,                              // Window height pad
                    selector:                       'a',                            // Anchor tag selector
                    popupSpeed:                     300,                            // Popup (resize) speed
                    popupWidth:                     200,                            // Popup width
                    popupHeight:                    100,                            // Popup height
                    popupIsFixed:                   false,                          // If true, popup won't resize to fit images
                    useBodyOverflow:                true,                           // If true, the BODY tag is set to overflow: hidden when the popup is visible
                    usePopupEasyClose:              true,                           // If true, popup can be closed by clicking on it anywhere
                    usePopupLoader:                 true,                           // If true, show the popup loader
                    usePopupCloser:                 true,                           // If true, show the popup closer button/link
                    usePopupCaption:                false,                          // If true, show the popup image caption
                    usePopupNav:                    false,                          // If true, show (and use) popup navigation
                    usePopupDefaultStyling:         true,                           // If true, default popup styling will be applied (background color, text color, etc)
                    popupBackgroundColor:           '#FFFFFF',                      // (Default Style) Popup background color (when usePopupStyling = true)
                    popupTextColor:                 '#000000',                      // (Default Style) Popup text color (when usePopupStyling = true)
                    popupLoaderTextSize:            '2em',                          // (Default Style) Popup loader text size
                    popupCloserBackgroundColor:     '#000000',                      // (Default Style) Popup closer background color (when usePopupStyling = true)
                    popupCloserTextColor:           '#FFFFFF',                      // (Default Style) Popup closer text color (when usePopupStyling = true)
                    popupCloserTextSize:            '20px',                         // (Default Style) Popup closer text size
                    popupPadding:                   10,                             // (Default Style) Popup padding (when usePopupStyling = true)
                    popupCaptionHeight:             60,                             // (Default Style) Popup height of caption area
                    popupCaptionTextSize:           null,                           // (Default Style) Popup caption text size
                    popupBlankCaptionText:          '(untitled)',                   // Applied to images that don't have captions (when captions are enabled)
                    popupCloserText:                '&#215;',                       // Popup closer text
                    popupLoaderText:                '&bull;&bull;&bull;&bull;',     // Popup loader text
                    popupClass:                     'poptrox-popup',                // Popup class
                    popupSelector:                  null,                           // (Advanced) Popup selector (use this if you want to replace the built-in popup)
                    popupLoaderSelector:            '.loader',                      // (Advanced) Popup Loader selector
                    popupCloserSelector:            '.closer',                      // (Advanced) Popup Closer selector
                    popupCaptionSelector:           '.caption',                     // (Advanced) Popup Caption selector
                    popupNavPreviousSelector:       '.nav-previous',                // (Advanced) Popup Nav Previous selector
                    popupNavNextSelector:           '.nav-next',                    // (Advanced) Popup Nav Next selector
                    onPopupClose:                   null,                           // On Popup Close Callback
                    onPopupOpen:                    null                            // On Popup Open Callback
            }, options);
            
        // Variables

            var __msie = navigator.userAgent.match(/MSIE ([0-9]+)\./), __msie6 = __msie && (RegExp. == 6), __msie67 = __msie && (RegExp. < 8);
            var __pos = (__msie6 ? 'absolute' : 'fixed');
            var _isTouch = !!('ontouchstart' in window), _eventType = 'click';
            var isLocked = false, cache = new Array();

            var _top = jQuery(this);
            var _body = jQuery('body');
            var _overlay = jQuery('<div></div>');
            var _window = jQuery(window);
            var windowWidth, windowHeight, queue = [], navPos = 0;

            function updateWH()
            {
                windowWidth = jQuery(window).width();
                windowHeight = jQuery(window).height() + settings.windowHeightPad;
            }

            // Disable unused features
                if (!settings.usePopupLoader)
                    settings.popupLoaderSelector = null;

                if (!settings.usePopupCloser)
                    settings.popupCloserSelector = null;

                if (!settings.usePopupCaption)
                    settings.popupCaptionSelector = null;

                if (!settings.usePopupNav)
                {
                    settings.popupNavPreviousSelector = null;
                    settings.popupNavNextSelector = null;
                }

            // Get popup
                if (settings.popupSelector)
                    var _popup = jQuery(settings.popupSelector);
                else
                    var _popup = jQuery('<div class="' + settings.popupClass + '">' + (settings.popupLoaderSelector ? '<div class="loader">' + settings.popupLoaderText + '</div>' : '') + '<div class="pic"></div>' + (settings.popupCaptionSelector ? '<div class="caption"></div>' : '') + (settings.popupCloserSelector ? '<span class="closer">' + settings.popupCloserText + '</span>' : '') + (settings.popupNavPreviousSelector ? '<div class="nav-previous"></div>' : '') + (settings.popupNavNextSelector ? '<div class="nav-next"></div>' : '') + '</div>');

            // Get popup components
                var _pic = _popup.find('.pic');
                var _x = jQuery();
                var _loader = _popup.find(settings.popupLoaderSelector);
                var _caption = _popup.find(settings.popupCaptionSelector);
                var _closer = _popup.find(settings.popupCloserSelector);
                var _nav_next = _popup.find(settings.popupNavNextSelector);
                var _nav_previous = _popup.find(settings.popupNavPreviousSelector);
                var _nav = _nav_next.add(_nav_previous);

            // Apply default styling?
                if (settings.usePopupDefaultStyling)
                {
                    _popup.css('background', settings.popupBackgroundColor);
                    _popup.css('color', settings.popupTextColor);
                    _popup.css('padding', settings.popupPadding + 'px');
                        
                    if (_caption.length > 0)
                    {
                        _popup.css('padding-bottom', settings.popupCaptionHeight + 'px');
                        _caption
                            .css('position', 'absolute')
                            .css('left', '0')
                            .css('bottom', '0')
                            .css('width', '100%')
                            .css('text-align', 'center')
                            .css('height', settings.popupCaptionHeight + 'px')
                            .css('line-height', settings.popupCaptionHeight + 'px');
                            
                        if (settings.popupCaptionTextSize)
                            _caption.css('font-size', popupCaptionTextSize);
                    }
                        
                    if (_closer.length > 0)
                        _closer
                            .html(settings.popupCloserText)
                            .css('font-size', settings.popupCloserTextSize)
                            .css('background', settings.popupCloserBackgroundColor)
                            .css('color', settings.popupCloserTextColor)
                            .css('display', 'block')
                            .css('width', '40px')
                            .css('height', '40px')
                            .css('line-height', '40px')
                            .css('text-align', 'center')
                            .css('position', 'absolute')
                            .css('text-decoration', 'none')
                            .css('outline', '0')
                            .css('top', '0')
                            .css('right', '-40px');
                            
                    if (_loader.length > 0)
                    {
                        _loader
                            .html('')
                            .css('position', 'relative')
                            .css('font-size', settings.popupLoaderTextSize)
                            .bind('startSpinning', function(e) {
                                var x = jQuery('<div>' + settings.popupLoaderText + '</div>');
                                x
                                    .css('height', Math.floor(settings.popupHeight / 2) + 'px')
                                    .css('overflow', 'hidden')
                                    .css('line-height', Math.floor(settings.popupHeight / 2) + 'px')
                                    .css('text-align', 'center')
                                    .css('margin-top', Math.floor((_popup.height() - x.height() + (_caption.length > 0 ? _caption.height() : 0)) / 2))
                                    .css('color', (settings.popupTextColor ? settings.popupTextColor : ''))
                                    .bind('xfin', function() { x.fadeTo(300, 0.5, function() { x.trigger('xfout'); }); })
                                    .bind('xfout', function() { x.fadeTo(300, 0.05, function() { x.trigger('xfin'); }); })
                                    .trigger('xfin');
                                _loader.append(x);
                            })
                            .bind('stopSpinning', function(e) {
                                var x = _loader.find('div');
                                x.remove();
                            });
                    }
                    
                    if (_nav.length == 2)
                    {
                        _nav
                            .css('font-size', '75px')
                            .css('text-align', 'center')
                            .css('color', '#fff')
                            .css('text-shadow', 'none')
                            .css('height', '100%')
                            .css('position', 'absolute')
                            .css('top', '0')
                            .css('opacity', '0.35')
                            .css('cursor', 'pointer')
                            .css('box-shadow', 'inset 0px 0px 10px 0px rgba(0,0,0,0)')
                            .poptrox_disableSelection();

                        var wn, wp;

                        if (settings.usePopupEasyClose)
                        {
                            wn = '100px';
                            wp = '100px';
                        }
                        else
                        {
                            wn = '75%';
                            wp = '25%';
                        }
                        
                        _nav_next
                            .css('right', '0')
                            .css('width', wn)
                            .html('<div style="position: absolute; height: 100px; width: 125px; top: 50%; right: 0; margin-top: -50px;">&gt;</div>');

                        _nav_previous
                            .css('left', '0')
                            .css('width', wp)
                            .html('<div style="position: absolute; height: 100px; width: 125px; top: 50%; left: 0; margin-top: -50px;">&lt;</div>');
                    }
                }
        
        // Main
            _window
                .bind('orientationchange', function() {
                    _window.trigger('resize');
                })
                .resize(function() {
                    updateWH();
                    _popup.trigger('poptrox_close');
                });

            _caption
                .bind('update', function(e, s) {
                    if (!s || s.length == 0)
                        s = settings.popupBlankCaptionText;
                    _caption.html(s);
                });
            
            _closer
                .css('cursor', 'pointer')
                .bind(_eventType, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _popup.trigger('poptrox_close');
                    return true;
                });

            _nav_next
                .click(function() {
                    _popup.trigger('poptrox_next');
                });

            _nav_previous
                .click(function() {
                    _popup.trigger('poptrox_previous');
                });

            _overlay
                .prependTo(__msie67 ? 'body' : 'html')
                .hide();

            if (__msie6)
                _overlay.css('position', 'absolute');
            else
                _overlay
                    .css('position', __pos)
                    .css('left', 0)
                    .css('top', 0)
                    .css('z-index', settings.baseZIndex)
                    .css('width', '200%')
                    .css('height', '200%')
                    .css('background-color', settings.overlayColor);

            _overlay
                .css('cursor', 'pointer')
                .bind(_eventType, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _popup.trigger('poptrox_close');
                });

            if (settings.usePopupEasyClose)
            {
                _pic
                    .css('cursor', 'pointer')
                    .bind(_eventType, function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        _popup.trigger('poptrox_close');
                    });
            }

            _popup
                .bind('poptrox_next', function() {
                    var x = navPos + 1;
                    if (x >= queue.length)
                        x = 0;
                    _popup.trigger('poptrox_switch', [x]);
                })
                .bind('poptrox_previous', function() {
                    var x = navPos - 1;
                    if (x < 0)
                        x = queue.length - 1;
                    _popup.trigger('poptrox_switch', [x]);
                })
                .bind('poptrox_reset', function() {
                    updateWH();

                    _popup
                        .css('position', __pos)
                        .css('z-index', settings.baseZIndex + 1)
                        .css('width', settings.popupWidth + 'px')
                        .css('height', settings.popupHeight + 'px')
                        .css('left', (windowWidth / 2) + 'px')
                        .css('top', (windowHeight / 2) + 'px')
                        .css('top', (windowHeight / 2) + 'px')
                        .css('margin-left', (-1 * (_popup.outerWidth() / 2)) + 'px')
                        .css('margin-top', (-1 * (_popup.outerHeight() / 2)) + 'px')
                    _loader.hide().trigger('stopSpinning');
                    _caption.hide();
                    _closer.hide();
                    _nav.hide();
                    _pic.hide();
                    _x.detach();
                })
                .bind('poptrox_open', function(e, index) {
                    if (isLocked)
                        return true;
                    isLocked = true;
                    if (settings.useBodyOverflow)
                        _body.css('overflow', 'hidden');
                    if (settings.onPopupOpen)
                        (settings.onPopupOpen)();
                    _overlay
                        .fadeTo(settings.fadeSpeed, settings.overlayOpacity, function() {
                            _popup.trigger('poptrox_switch', [index, true]);
                        });
                })
                .bind('poptrox_switch', function(e, index, ignoreLock) {
                    var x, img;

                    if (!ignoreLock && isLocked)
                        return true;
                    
                    isLocked = true;

                    // Cleanup from previous
                        _caption.hide();
                        if (_x.attr('src'))
                            _x.attr('src', '');
                        _x.detach();
                    
                    // Activate new object
                        x = queue[index];
                        _x = x.object;
                        _x.unbind('load');
                    
                        _pic
                            .css('text-indent', '-9999em')
                            .show()
                            .append(_x);

                        if (x.type == 'ajax')
                        {
                            jQuery.get(x.src, function(data) {
                                _x.html(data);
                                _x.trigger('load');
                            });
                        }
                        else
                            _x.attr('src', x.src);
                        
                        if (x.type != 'image')
                            _x
                                .css('position', 'relative')
                                .css('outline', '0')
                                .css('z-index', settings.baseZIndex + 100)
                                .width(x.width)
                                .height(x.height);

                    // Initialize
                        _loader.trigger('startSpinning').fadeIn(300);
                        _popup.show();

                    if (settings.popupIsFixed)
                    {
                        _popup
                            .width(settings.popupWidth)
                            .height(settings.popupHeight)
                            .css('margin-left', (-1 * (_popup.innerWidth() / 2)) + 'px')
                            .css('margin-top', (-1 * (_popup.innerHeight() / 2)) + 'px');

                        _x.load(function() {
                            _x.unbind('load');
                            _loader.hide().trigger('stopSpinning');
                            _caption.trigger('update', [x.captionText]).fadeIn(settings.fadeSpeed);
                            _closer.fadeIn(settings.fadeSpeed);
                            _pic.css('text-indent', 0).hide().fadeIn(settings.fadeSpeed, function() { isLocked = false; });
                            navPos = index;
                            _nav.fadeIn(settings.fadeSpeed);
                        });
                    }
                    else
                    {
                        _x.load(function() {
                            _x.unbind('load');

                            updateWH();

                            var dw = Math.abs(_popup.width() - _popup.outerWidth()), dh = Math.abs(_popup.height() - _popup.outerHeight());
                            var nw = _x.width(), nh = _x.height();
                            var maxw = windowWidth - (settings.windowMargin * 2) - dw, maxh = windowHeight - (settings.windowMargin * 2) - dh;
                            
                            _loader.hide().trigger('stopSpinning');
                            
                            if (nw > maxw || nh > maxh)
                            {
                                var multW, multH, m;
                                
                                multW = maxw / nw;
                                multH = maxh / nh;
                                m = Math.min(multW, multH);
                                
                                nw = Math.floor(m * nw);
                                nh = Math.floor(m * nh);

                                _x.width(nw).height(nh);
                            }

                            if (_popup.innerWidth() == nw + dw
                            &&  _popup.innerHeight() == nh + dh)
                            {
                                _caption.trigger('update', [x.captionText]).fadeIn(settings.fadeSpeed);
                                _closer.fadeIn(settings.fadeSpeed);
                                _pic.css('text-indent', 0).hide().fadeIn(settings.fadeSpeed, function() { isLocked = false; });
                                navPos = index;
                            }
                            else
                                _popup
                                    .animate({
                                        width: nw,
                                        height: nh,
                                        marginLeft: (-1 * (nw / 2)) - (dw / 2),
                                        marginTop: (-1 * (nh / 2)) - (dh / 2)
                                    }, settings.popupSpeed, 'swing', function() {
                                        _caption.trigger('update', [x.captionText]).fadeIn(settings.fadeSpeed);
                                        _closer.fadeIn(settings.fadeSpeed);
                                        _pic.css('text-indent', 0).hide().fadeIn(settings.fadeSpeed, function() { isLocked = false; });
                                        navPos = index;
                                        _nav.fadeIn(settings.fadeSpeed);
                                    });
                        });
                    }
                    
                    if (x.type != 'image')
                        _x.trigger('load');
                })
                .bind('poptrox_close', function() {
                    if (isLocked)
                        return true;
                    isLocked = true;
                    _popup
                        .hide()
                        .trigger('poptrox_reset');
                    if (settings.onPopupClose)
                        (settings.onPopupClose)();
                    _overlay
                        .fadeOut(settings.fadeSpeed, function() {
                            if (settings.useBodyOverflow)
                                _body.css('overflow', 'auto');
                            isLocked = false;
                        });
                })
                .prependTo('body')
                .hide()
                .trigger('poptrox_reset');

            _window
                .keydown(function(e) {
                    if (_popup.is(':visible'))
                    {
                        switch (e.keyCode)
                        {
                            case 37:
                            case 32:
                                if (settings.usePopupNav)
                                {
                                    _popup.trigger('poptrox_previous');
                                    return false;
                                }
                                break;

                            case 39:
                                if (settings.usePopupNav)
                                {
                                    _popup.trigger('poptrox_next');
                                    return false;
                                }
                                break;

                            case 27:
                                _popup.trigger('poptrox_close');
                                return false;

                                break;
                        }
                    }
                });
            
            _top.find(settings.selector).each(function(index) {
                
                var x, tmp, a = jQuery(this), i = a.find('img'), data = a.data('poptrox');

                x = {
                    src:            a.attr('href'),
                    captionText:    i.attr('title'),
                    width:          a.attr('width'),
                    height:         a.attr('height'),
                    type:           null,
                    object:         null
                };

                // If a data attribute exists, use it
                    if (data)
                    {
                        var k, b = data.split(',');
                        
                        for (k in b)
                        {
                            tmp = b[k].match(/([0-9]+)x([0-9]+)/);
                            
                            // Size
                                if (tmp && tmp.length == 3)
                                {
                                    x.width = tmp[1];
                                    x.height = tmp[2];
                                }
                            // Type
                                else
                                    x.type = b[k];
                        }
                    }
                    
                // No type? Attempt to guess it based on the href's domain
                    if (!x.type)
                    {
                        tmp = x.src.match(/http[s]?:\/\/([a-z0-9\.]+)\/.*/);

                        if (!tmp || tmp.length < 3)
                            tmp = [false];

                        switch (tmp[1])
                        {
                            case 'api.soundcloud.com':
                                x.type = 'soundcloud';
                                break;

                            case 'youtu.be':
                                x.type = 'youtube';
                                break;

                            case 'vimeo.com':
                                x.type = 'vimeo';
                                break;

                            default:
                                x.type = 'image';
                                break;
                        }
                    }
                
                // Create object (based on type)
                    tmp = x.src.match(/http[s]?:\/\/[a-z0-9\.]+\/(.*)/);

                    switch (x.type)
                    {
                        case 'ignore':
                            break;
                    
                        case 'iframe':
                            x.object = jQuery('<iframe src="" frameborder="0"></iframe>');
                            x.object
                                .bind(_eventType, function(e) { e.stopPropagation(); })
                                .css('cursor', 'auto');
                            break;
                            
                        case 'ajax':
                            x.object = jQuery('<div class="poptrox-ajax"></div>');
                            x.object
                                .bind(_eventType, function(e) { e.stopPropagation(); })
                                .css('cursor', 'auto')
                                .css('overflow', 'auto');
                            break;
                    
                        case 'soundcloud':
                            x.object = jQuery('<iframe scrolling="no" frameborder="no" src=""></iframe>');
                            x.src = 'https://w.soundcloud.com/player/?url=' + escape(x.src);
                            x.width = '600';
                            x.height = "166";
                            break;

                        case 'youtube':
                            x.object = jQuery('<iframe src="" frameborder="0" allowfullscreen="1"></iframe>');
                            x.src = 'http://www.youtube.com/embed/' + tmp[1];
                            break;

                        case 'vimeo':
                            x.object = jQuery('<iframe src="" frameborder="0" allowFullScreen="1"></iframe>');
                            x.src = 'http://player.vimeo.com/video/' + tmp[1];
                            break;

                        default:
                            x.object = jQuery('<img src="" alt="" />');
                            if (settings.preload) { var tmp = document.createElement('img'); tmp.src = x.src; cache.push(tmp); }
                            break;
                    }

                queue.push(x);
                
                i
                    .attr('title', '');
                
                if (x.type != 'ignore')
                {
                    a
                        .attr('href', '')
                        .css('outline', 0)
                        .click(function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            _popup.trigger('poptrox_open', [index]);
                        });
                }
            });
            
        return jQuery(this);
    };
})(jQuery);

Answer 1

您已经接近解决方案了。我真的很感谢你。

我已经将代码部署到虚拟 URL： https://distracted-pasteur-66c13a.netlify.app/

您可以使用以下方法 CSS 使您的导航栏具有粘性。

 nav {

       /* to give background color */
       background: #232323;
       /* to give the text color */
       color: #cdcdcd;
       /* to make the nav fixed */
       position: fixed;
       /* to set the position of the navbar */
       top: 0;
       /* to set the width of navbar */
       width: 100%;
       /* to make it look cleaner */
       padding-bottom: 30px;
     }

我已经更新了你的代码，如下所示：

<!DOCTYPE html>

<head>
    <style>
        nav {
            /* to give background color */
            background: #232323;
            /* to give the text color */
            color: #cdcdcd;
            /* to make the nav fixed */
            position: fixed;
            /* to set the position of the navbar */
            top: 0;
            /* to set the width of navbar */
            width: 100%;
            /* to make it look cleaner */
            padding-bottom: 30px;
        }

        #menuToggle {
            display: inline-block;
            position: fixed;
            top: 50px;
            left: 50px;

            z-index: 1;

            -webkit-user-select: none;
            user-select: none;
        }

        #menuToggle a {
            text-decoration: none;
            color: #232323;

            transition: color 0.3s ease;
        }

        #menuToggle a:hover {
            color: yellowgreen;
        }


        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;

            cursor: pointer;

            opacity: 0;
            /* hide this */
            z-index: 2;
            /* and place it over the hamburger */

            -webkit-touch-callout: none;
        }

        /*
        * Just a quick hamburger
        */
        #menuToggle span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;

            background: #cdcdcd;
            border-radius: 3px;

            z-index: 1;

            transform-origin: 4px 0px;

            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                opacity 0.55s ease;
        }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

        /*
        * Transform all the slices of hamburger
        * into a crossmark.
        */
        #menuToggle input:checked~span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background: #232323;
        }

        /*
        * But let's hide the middle one.
        */
        #menuToggle input:checked~span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
        * Ohyeah and the last one should go the other direction
        */
        #menuToggle input:checked~span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }

        /*
        * Make this absolute positioned
        * at the top left of the screen
        */
        #menu {
            position: absolute;
            width: 300px;
            margin: -100px 0 0 -50px;
            padding: 50px;
            padding-top: 125px;
            padding-bottom: 325px;

            background: #ededed;
            list-style-type: none;
            -webkit-font-smoothing: antialiased;
            /* to stop flickering of text in safari */

            transform-origin: 0% 0%;
            transform: translate(-100%, 0);

            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }

        #menu li {
            padding: 8px 0;
            font-size: 20px;

        }

        /*
        * And let's slide it in from the left
        */
        #menuToggle input:checked~ul {
            transform: none;
        }


        /* header-right */
        .header-right li {
            display: inline-block;
            margin-right: 50px;
            margin-top: 45px;
            font-size: 16px;
            text-decoration: none;
            float: right;
            font-family: inherit;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            transition: .5s;

        }

        .header-right li i {
            margin-right: 7px;
            color: #888;
            text-decoration: none;
        }

        .header-right li :hover {
            color: #7370d8;
            text-decoration: none;
        }

        /*
        * Subscription form for newsletter
        */

        .subscribe-form input[type="text"] {
            padding: 13.225px 30px;
            border: none;
            background: #f2f2f2;
            float: none;

        }

        .subscribe-form input[type="submit"] {
            background: #9bf55f;
            color: #fff;
            padding: 16px 24px;
            border: none;
            font-size: 18px;
            float: none;

        }

        .vh100 {
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <nav role="navigation">
        <div id="menuToggle">

            <input type="checkbox" />


            <span></span>
            <span></span>
            <span></span>


            <ul id="menu">
                <a href="index.html">
                    <li>Home</li>
                </a>
                <a href="about-us.html">
                    <li>My listings</li>
                </a>
                <a href="https://selar.co/vmo2" target="_blank">
                    <li>Bookings</li>
                </a>
                <a href="faq.html">
                    <li>FAQ</li>
                </a>
            </ul>
        </div>
        <div class="header-right">
            <ul class="pull-right">
                <li>
                    <a href="#">
                        <i class="fa fa-phone"></i> +5558976555
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-envelope"></i>mylistings@gmail.com
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="vh100" style="background-color: #7370d8;">

    </div>
    <div class="vh100" style="background-color: #303033;">

    </div>
</body>

</html>

如果您需要更多帮助，请告诉我。

谢谢，
Shubh Wadekar

Answer 2

您要实现的目标需要您申请 position: fixed 到两个元素。另一种更好的方法是仅将 position: fixed 应用于父 nav 元素。
要使其在滚动时改变颜色，需要 javascript。我已经在演示中添加了代码。此外，还为其添加了过渡。默认导航是绝对的，但当滚动到达导航高度时，它会固定并改变颜色。
我还注意到您使用了 floating 但没有清除浮动。最好只使用 display: flex。我已将内部导航元素包裹在 .nav-inner 内，并对其应用 flex 以便更好地控制。
您的代码还缺少 nav、body 和 html 的结束标记。

演示：

let nav = document.getElementById('nav');

window.addEventListener('scroll', function () {
    if (window.pageYOffset > nav.offsetHeight) {
        nav.classList.add('sticky');
    } else {
        nav.classList.remove('sticky');
    }
});

body {
    height: 2000px;
    /* For demo only */
    margin: 0;
    position: relative;
}

nav {
    position: absolute;
    width: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

a {
    text-decoration: none;
}

.inner-nav {
    padding: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

#menuToggle {
    display: inline-block;
    position: relative;
    z-index: 1;
}
#menuToggle a {
    text-decoration: none;
    color: #232323;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
#menuToggle a:hover {
    color: yellowgreen;
}
#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}
#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    -webkit-transform-origin: 4px 0px;
            transform-origin: 4px 0px;
    -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menuToggle span:first-child {
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
    opacity: 1;
    -webkit-transform: rotate(45deg) translate(-2px, -1px);
            transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.2, 0.2);
            transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
    -webkit-transform: rotate(-45deg) translate(0, -1px);
            transform: rotate(-45deg) translate(0, -1px);
}
#menuToggle input:checked ~ ul {
    -webkit-transform: none;
            transform: none;
}

#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    padding-bottom: 325px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
    padding: 8px 0;
    font-size: 20px;
}

.header-right ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-right li {
    margin-left: 50px;
    font-size: 16px;
    text-decoration: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.header-right li i {
    margin-right: 7px;
    color: #888;
    text-decoration: none;
}
.header-right li:hover {
    color: #7370d8;
    text-decoration: none;
}

.subscribe-form input[type=text] {
    padding: 13.225px 30px;
    border: none;
    background: #f2f2f2;
}
.subscribe-form input[type=submit] {
    background: #9bf55f;
    color: #fff;
    padding: 16px 24px;
    border: none;
    font-size: 18px;
}

.sticky {
    position: fixed;
    z-index: 1;
    background: #232323;
    color: #cdcdcd;
}
.sticky a {
    color: #fff;
}

<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
            <script src="css/ie/html5shiv.js"></script>
        <![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.poptrox-2.2.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel-noscript.css" />
            <link rel="stylesheet" href="css/style.css" />
        </noscript>
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="css/ie/v8.css" />
        <![endif]-->
    </head>
    <body>
        <nav id="nav" role="navigation">
            <div class="inner-nav">
                <div id="menuToggle">
                    <input type="checkbox" />

                    <span></span>
                    <span></span>
                    <span></span>

                    <ul id="menu">
                        <a href="index.html">
                            <li>Home</li>
                        </a>
                        <a href="about-us.html">
                            <li>My listings</li>
                        </a>
                        <a href="https://selar.co/vmo2" target="_blank">
                            <li>Bookings</li>
                        </a>
                        <a href="faq.html">
                            <li>FAQ</li>
                        </a>
                    </ul>
                </div>
                <div class="header-right">
                    <ul>
                        <li>
                            <a href="#"> <i class="fa fa-phone"></i> +5558976555 </a>
                        </li>
                        <li>
                            <a href="#"> <i class="fa fa-envelope"></i>mylistings@gmail.com </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
</html>

2022 年 2 月 28 日更新：

修复了菜单切换 - 原因是 z-index 不适用。将 position: relative 添加到 #menuToggle
删除了链接中的下划线
Cleaned-up 代码。删除了浮动和使用 flex。
在 css

如何使菜单中的所有项目都具有粘性？

How can I make all the items in the menu sticky?

html

css

menu