Javascript 如何在某些部分隐藏/显示固定元素？_Javascript_Jquery_Html_Css

Javascript 如何在某些部分隐藏/显示固定元素？

javascript jquery html css

Javascript 如何在某些部分隐藏/显示固定元素？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在某些部分显示/隐藏固定元素logoimode3 例如：在第1节和第3节上显示第3节隐藏#第2节上的#logoimode3 因此，固定元素必须在蓝色部分分解。然后在绿色部分再次显示。我希望我的徽标在滚动trought第2节时消失 <!DOCTYPE html> <html> <head> <style></style> <script></script> </head> <bo

我想在某些部分显示/隐藏固定元素logoimode3

例如：在第1节和第3节上显示第3节隐藏#第2节上的#logoimode3

因此，固定元素必须在蓝色部分分解。然后在绿色部分再次显示。我希望我的徽标在滚动trought第2节时消失

<!DOCTYPE html>

<html>
<head>
<style></style>
<script></script>

</head>

<body>
      <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">

<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>

</body>

<footer></footer>

</html>

完整的代码就是您所需要的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">

    <section id="section1" style="background: red; height:100vh;"></section>
    <section id="section2" style="background: blue; height:100vh;"></section>
    <section id="section3" style="background: green; height:100vh;"></section>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function() { 
            var $window = $(window);
            var logo = $('#logoimode3'); 
            var div1 = $('#section1'); 
            var div1_height = div1.height();

            $window.on(function() { 
                var scrollTop = $(window).scrollTop();
                var viewport_height = $window.height(); 
                var scrollTop_bottom = scrollTop + viewport_height;

                if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.css({'display' : 'none'});
                }
                else {
                    logo.css({'display' : 'block'});
                }

                // Work with Class
                /* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.addClass('hidden');
                }
                else {
                    logo.removeClass('hidden');
                } */
            });
        });
    </script>
</body>
</html>


文件
.隐藏{
显示：无；
}
$（函数（）{
变量$window=$（window）；
var logo=$（“#logoimode3”）；
var div1=$（'第1节'）；
var div1_height=div1.height（）；
$window.on（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
var viewport_height=$window.height（）；
var scrollTop\u bottom=scrollTop+视口高度；
如果（scrollTop>div1\u height&&（scrollTop\u bottom div1\u height&&）（scrollTop\u bottom获取节的高度，当节的顶部达到0时，它隐藏，当节的底部达到0时，它再次显示


jQuery（文档）.ready（函数（）{
var sec2=document.getElementById（“section2”）；
var pos=sec2.getBoundingClientRect（）；
变量高度1=位置高度*-1；
如果（位置顶部<1和位置顶部>高度1）{
jQuery（'#logoimode3'）.hide（）；
}
否则如果（位置顶部<高度1 | |位置顶部>1）{
jQuery（'#logoimode3'）.show（）；
}
});
jQuery（窗口）.滚动（函数（）{
var sec2=document.getElementById（“section2”）；
var pos=sec2.getBoundingClientRect（）；
变量高度1=位置高度*-1；
如果（位置顶部<1和位置顶部>高度1）{
jQuery（'#logoimode3'）.hide（）；
}
否则如果（位置顶部<高度1 | |位置顶部>1）{
jQuery（'#logoimode3'）.show（）；
}
});

jQuery（文档）.ready（函数（$）{
$（'logoimode4'）.css（{'display'：'none'}）；
$（函数（）{
变量$window=$（window）；
var logo=$（“#logoimode4”）；
var div1=$（“#section1stran”）；
var div2=$（“#section2stran”）；
var div3=$（“#section3stran”）；
var div4=$（“#section4stran”）；
var div5b=$（“#第5bstran节”）；
var div1_height=div1.height（）；
var div2_height=div2.height（）；
var div3_height=div3.height（）；
var div4_height=div4.height（）；
var div5b_height=div5b.height（）；
$window.on（'scroll'，function（）{
var scrollTop=document.documentElement.scrollTop；
var viewport_height=$window.height（）；
var scrollTop\u bottom=scrollTop+视口高度；
//如果（scrollTop>=0&&（scrollTop\u bottom=div1\u height*0+div1\u height*1+div2\u height+div3\u height+div4\u height+div5b\u height&&（scrollTop\u bottom=div1\u height&&）（scrollTop\u bottom=div1\u height&）脚本在哪里？页脚和图像标记应该在正文中这是一个错误。jQuery（文档）就绪（函数（$）{$（窗口）。scroll（function（）{$（'#logoimode3'）.show（）；if（$（window.scrollTop（）++$（window.height（）==$（document.height（））{$（'#logoimode3'）.hide（）；}}）；-->这只在页脚区域起作用。这不起作用：好的，很高兴能帮助您。您知道为什么这段代码在Safari浏览器中不起作用吗？（但它在Crome、Firefox等中工作正常）-当我检查控制台日志（srollTop、heights等）时，数字不会改变。感谢您将其设置为：$（窗口）。滚动（function（）{var scrollTop=$（窗口）。scrollTop（）；现在它可以工作了
    <script>

    jQuery(document).ready(function($) {

 $('#logoimode4').css({'display' : 'none'});

        $(function() { 



            var $window = $(window);
            var logo = $('#logoimode4'); 
            var div1 = $('#section1stran'); 
            var div2 = $('#section2stran');
            var div3 = $('#section3stran');
            var div4 = $('#section4stran');
            var div5b = $('#section5bstran');


            var div1_height = div1.height();
            var div2_height = div2.height();
            var div3_height = div3.height();
            var div4_height = div4.height();
            var div5b_height = div5b.height();


            $window.on('scroll', function() { 
                var scrollTop = document.documentElement.scrollTop; 
                var viewport_height = $window.height(); 
                var scrollTop_bottom = scrollTop + viewport_height;

             //   if (scrollTop >= 0 && (scrollTop_bottom <=  div1_height * 1.9 )) {
               //     logo.css({'display' : 'none'});
            //    }


              if (scrollTop >= div1_height * 0 + div1_height * 1 + div2_height + div3_height + div4_height + div5b_height && (scrollTop_bottom <=  div1_height * 5 + div1_height + div2_height + div3_height + div4_height + div5b_height )) {
                    logo.css({'display' : 'block'});
                }




                else {
                    logo.css({'display' : 'none'});
                }

                // Work with Class
                /* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.addClass('hidden');
                }
                else {
                    logo.removeClass('hidden');
                } */
            });
        });

    });
    </script>