html侧栏无法在整页中使用，仅显示在div中

Question

I have tried many sidebars on my web page, some slide bars did not work properly because of javaScript problem. Fortunately, one sidebar worked properly with my web page.

There is some problem with this sidebar. This sidebar works only in a particular div rather than the full web page. Please take a look at this JsFiddle , the problem can be observed by scrolling down the page. I need the sidebar to open in any section because the header menu is sticky.

Copy of JsFiddle code:

 (function(window) { 'use strict'; function classReg(className) { return new RegExp("(^|\\\\s+)" + className + "(\\\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ('classList' in document.documentElement) { hasClass = function(elem, c) { return elem.classList.contains(c); }; addClass = function(elem, c) { elem.classList.add(c); }; removeClass = function(elem, c) { elem.classList.remove(c); }; } else { hasClass = function(elem, c) { return classReg(c).test(elem.className); }; addClass = function(elem, c) { if (!hasClass(elem, c)) { elem.className = elem.className + ' ' + c; } }; removeClass = function(elem, c) { elem.className = elem.className.replace(classReg(c), ' '); }; } function toggleClass(elem, c) { var fn = hasClass(elem, c) ? removeClass : addClass; fn(elem, c); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if (typeof define === 'function' && define.amd) { // AMD define(classie); } else { // browser global window.classie = classie; } })(window); var SidebarMenuEffects = (function() { function hasParentClass(e, classname) { if (e === document) return false; if (classie.has(e, classname)) { return true; } return e.parentNode && hasParentClass(e.parentNode, classname); } function mobilecheck() { var check = false; (function(a) { if (/(android|ipad|playbook|silk|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[aw])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera); return check; } function init() { var container = document.getElementById('st-container'), buttons = Array.prototype.slice.call(document.querySelectorAll('#st-trigger-effects > button')), // event type (if mobile use touch events) eventtype = mobilecheck() ? 'touchstart' : 'click', resetMenu = function() { classie.remove(container, 'st-menu-open'); }, bodyClickFn = function(evt) { if (!hasParentClass(evt.target, 'st-menu')) { resetMenu(); document.removeEventListener(eventtype, bodyClickFn); } }; buttons.forEach(function(el, i) { var effect = el.getAttribute('data-effect'); el.addEventListener(eventtype, function(ev) { ev.stopPropagation(); ev.preventDefault(); container.className = 'st-container'; // clear classie.add(container, effect); setTimeout(function() { classie.add(container, 'st-menu-open'); }, 25); document.addEventListener(eventtype, bodyClickFn); }); }); } init(); })(); 

 html, body, .st-container, .st-pusher, .st-content { height: 100%; background: #1a1a1a; color: #48a770; font-weight: 300; font-family: 'Lato', Calibri, Arial, sans-serif; } button:hover { background: #fff; color: #15ccb5; } .st-content, .st-content-inner { position: relative; } .st-container { position: relative; overflow: hidden; } .st-pusher { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0, 0, 0, 0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu { position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; width: 300px; height: 100%; background: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .st-menu::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu-open .st-menu::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } /* content style */ .st-menu ul { margin: 0; padding: 0; list-style: none; } .st-menu h2 { margin: 0; padding: 0.5em; color: rgba(0, 0, 0, 0.4); text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); font-weight: 300; font-size: 2em; } .st-menu ul li a { display: block; padding: 1.5em 1em 1.5em 1.2em; outline: none; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2); color: #444; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; -webkit-transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s; } .st-menu ul li:first-child a { box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2); } .st-menu ul li a:hover { background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px rgba(0, 0, 0, 0); color: #fff; } .st-effect-3.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-3.st-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-3.st-menu-open .st-effect-3.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-effect-3.st-menu::after { display: none; } /* For browsers that don't support 3D transforms (and no JS fallback) */ .no-csstransforms3d .st-pusher, .no-js .st-pusher { padding-left: 300px; } 

 <div id="st-container" class="st-container"> <div class="st-pusher"> <nav class="st-menu st-effect-3" id="menu-3"> <h2>Navigation</h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="st-content"> <div class="st-content-inner"> <div class="main clearfix"> <div id="st-trigger-effects" class="column"> <button data-effect="st-effect-3">Click me</button> </div> </div> </div> </div> </div> </div> <div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> 

Answer 1

I saw the link you reffered Try This

jQuery(document).ready(function () {
        jQuery('#button-id').live('click', function (event) {
            jQuery('#leftcol').toggle('show');
        });
    });

css:

#leftcol{display:none}

Note: Here the #left-col is the id of the slide bar and #button-id is the id of button you want to show the html slide bar