向下滚动时隐藏透明固定导航栏下的内容

本文介绍了向下滚动时隐藏透明固定导航栏下的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 问题：我有透明的固定导航栏有一些差距（margin-top）和下面的内容，它位于导航栏下面，同时向下滚动全局。问题是navbar是透明的，页面的背景是不同图像的动态幻灯片，所以我不能使用z-index，并通过改变背景颜色或将图像设置为背景相同。 总结： 透明固定导航条 动态图片背景 必须进行全局滚动（不能使用滚动显示div内容） 我正在使用引导3 图纸： 错误：[现在的样子] [1] 右：[应该如何] [2] [1]：http://i.stack.imgur.com/Iwc1h.png [2]：http://i.stack.imgur.com /f1Sbd.png 对不起，了解我的问题，这里是代码： http://jsfiddle.net/5myw4e26/ 解决方案我成功地完成了我们想要做的事情。 使用JQuery我计算一个段落（ p.content ）和导航栏冲突。 有足够的finetune， $（document）.ready（function（）{ $（document）.scroll（function（）{ $（p）。 b $ b if（$（this）.offset（）。top< = $（document）.scrollTop（）+ 32）{ $（this）.css（opacity，0）; } else { $（this）.css（opacity，1）; } }）; }）; }）; ）.top< = $（document）.scrollTop（）+ 32 是导航栏的高度。 示例： / pre> body {margin：0px; font-family：Arial; font-size：12px; min-height：2000px;} nav {width：100％; height：32px; line-height：32px; text-align：center;位置：固定; top：0; border-bottom：1px solid black;} p.content {margin：12px 0px 0px 0px;背景：黄色;} p：第一类型{margin：44px 0px 0px 0px;} < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>< div id =wrapper> < nav>导航栏< / nav> < p class =content> Lorem ipsum dolor sit amet，consectetur adipiscing elit。在sed dolor metus。三叶栎，非ies olor。 Fusce nec dolor在purus consectetur lacinia non sit amet turpis。 Donec facilisis tortor mauris，nec vulputate massa fermentum vel。 Praesent in neque quis lacus hendrerit tincidunt sed et dolor。 Nullam fermentum，orci at pulvinar imperdiet，lacus libero facilisis ante，sit amet venenatis sem tortor in nibh。发酵醪。 Praesent faucibus，erat eget iaculis porttitor，purus purus posuere nulla，eget lacinia odio libero in lectus。 Vivamus sem ex，commodo ac tortor ut，fringilla vulputate porn。 < / p> < p class =content> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Fusce facilisis tellus luctus ornare hendrerit。 Curabitur hendrerit justo ante。 Maecenas scelerisque ligula condimentum，aliquam tortor sit amet，aliquam lacus。 Interdum et malesuada fames ac ante ipsum primis in faucibus。 Ut ut augue vel massa tempus laoreet。 Nulla porttitor，sem ac aliquet facilisis，purus ligula pulvinar ipsum，quis volutpat enim elit sed ante。 Pellentesque quis diam vestibulum，viverra elit at，sollicitudin mi。 Vivamus vehicula ex eu justo feugiat，a ullamcorper nisi commodo。 Phasellus sed tortor eget purus mollis tempor在坐amet libero。 Fusce tincidunt est est，tristique pretium justo feugiat eget。 Donec et lacus vehicula，aliquam sapien a，elefend tortor。< / p> < p class =content> Vivamus vitae placerat elit。在purus suscipit rutrum的整数eleibend nibh。 Aliquam et fermentum mauris。 Aenean gravida velit车辆等分。 Duis neque tortor，luctus eget condimentum eget，venenatis eget lorem。 Maecenas sed ullamcorper tellus。 Donec euismod bibendum nunc，nonuullamcorper neque cursus eget。 Curabitur dapibus orci non quam vestibulum ornare。 Aenean tincidunt interdum justo faucibus feugiat。 in ie ie。。。。。。。。。。。。。。。。。 Donec gravida viverra nisl，consectetur laoreet libero interdum ac。 Vivamus varius vestibulum quam eu rutrum。 Pellentesque id rhoncus massa。< / p> < p class =content> Nunc finibus leo mollis efficitur tempus。 Suspendisse交流电。导管ipsum faucibus arcu cursus congue。南鲁路面。 Ut sagittis orci，vel tincidunt elit。 Mauris odio sem，varius eget tortor at，commodo pretium massa。 Cras sed rhoncus dolor，non dictum sem。在imperdiet turpis的curabitur，在imperdiet mi。 Interdum et malesuada fames ac ante ipsum primis in faucibus。 Maecenas erat nisl，sagittis id eleifend ut，consequat eget orci。 Aenean blandit arcu non varius ornare。< / p> < p class =content> Pellentesque molestie consectetur lectus in iaculis。花生果提取物。 Morbi semper tristique ornare。 Morbi在cursus mauris。 Morbi et risus velit。 。。。。。。。。。。。。 Donec sollicitudin metus urna，eu pivano magna vehicula a。 Vivamus interdum，enim nonpilotat ultrices，lacus enim vehicula ante，vitae tristique tellus nibh sit amet eros。 Aliquam subsequents eu orci id rutrum。 Donec lacus eros，eleifend et viverra vitae，congue at turpis。 Quisque rhoncus fermentum ex sed lobortis。抚顺us，，，ida ida ida ida ida ida ida。。。。。。。。。。。。。。。 Donec auctor ligula sem，et porttitor neque eleifend vitae。 < / div> $ b $ bthe problem:I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..In conclusion:Transparent fixed navbar with gapDynamic images backgroundIt has to be global scrolling (can't use scrolling for div content)I'am using bootstrap 3Drawings:WRONG: [How its looks now][1]RIGHT: [How it should be][2] [1]: http://i.stack.imgur.com/Iwc1h.png [2]: http://i.stack.imgur.com/f1Sbd.pngSorry for problems with understanding me, here is code:http://jsfiddle.net/5myw4e26/ 解决方案 I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.There's more than enough to finetune, so you can adjust it to your needs.JQuery$(document).ready(function() { $(document).scroll(function() { $("p").each(function() { if ($(this).offset().top <= $(document).scrollTop() + 32) { $(this).css("opacity", "0"); } else { $(this).css("opacity", "1"); } }); }); });Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.Example:$(document).ready(function() { $(document).scroll(function() { $("p").each(function() { if ($(this).offset().top <= $(document).scrollTop() + 32) { $(this).css("opacity", "0"); } else { $(this).css("opacity", "1"); } }); });});body { margin: 0px; font-family: Arial; font-size: 12px; min-height: 2000px;}nav { width: 100%; height: 32px; line-height: 32px; text-align: center; position: fixed; top: 0; border-bottom: 1px solid black;}p.content { margin: 12px 0px 0px 0px; background: yellow;}p:first-of-type { margin: 44px 0px 0px 0px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><div id="wrapper"> <nav> Navigation Bar </nav> <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus, erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p> <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p> <p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus. Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p> <p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean blandit arcu non varius ornare.</p> <p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin laoreet dui mollis, scelerisque auctor metus.</p></div> 这篇关于向下滚动时隐藏透明固定导航栏下的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！