Question

这里有一个复杂的问题。我正在创建一个滚动的交互式，并且很难用航点制作不同的元素。一切都在一页上，但我想在你滚动时把东西粘在不同的地方。我会粘贴我的代码然后解释我想要它做什么。

HTML

<body>
<div class="wrap">
    <h1 id="title">DARK SKIES</h1>
    <h2><em>What we lose when they disappear</em></h2>

    <div class="introparagraph">
    <p>Intro paragraph part 1</p>

    <p>Intro paragraph part 2</p>
    </div>

<div id="blank"></div>



    <div class="bortlescale">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>  



    <div class="bortle-explanation">
        Bortle scale explanation
    </div>


<div id="blank"></div>


<div id="Classes">
    <h1>Class 1: Excellent Dark-Sky Site</h1>
    <div id="Class-Wrap">
        <div>
            Class 1 explanation 
        </div>
            <div id="Class1">
                Zodiacal Light
            </div>

            <div id="Class1">
                Gegenschein
            </div>

            <div id="Class1">
                Airglow
            </div>

            <div id="Class1">
                The Triangulum Galaxy
            </div>
    </div>

CSS

.wrap{
        margin:0 auto;
        vertical-align: center;
    }

    #title{
        font-family: "bebasregular", sans-serif;
        text-align: center;
        font-size: 300px;
        vertical-align: center;
        color:white;
        margin-bottom: -50px;
        top: 2px;

    }
    h2{
        font-family: "sinanova-regularregular", serif;
        text-align: center;
        font-size: 100px;
        vertical-align: center;
        color: white;
    }

    p{
        font-family:serif;
        font-size: 30px;
        text-align: center;
        position:relative;
        vertical-align: center;
        color:white;
    }
    .bortlescale{
        margin: 5px;
    }
    .bortlescale div{
        border:1px solid white;
        margin: 60px;
        margin-right:0px;
        padding:10px;
        width: 45px;
        text-align: center;
        border-radius: 100px;
        color:white;
        font-family: "Museo300Regular";
        font-size: 35px;
    }

    .introparagraph{
        text-align: center;
        margin:auto;
        width:1500px;
        font-size: 40px;
    }
    .introparagraph p{
        font-family:"sinanova-regularregular";
        font-size: 40px;    
    }

    .bortle-explanation{
        font-family: "sinanova-regularregular",serif;
        font-size: 35px;
        width:1000px;
        padding:40px;
        border-radius: 10px;
        float:left;
        margin-left: 200px;
        margin-top: 500px;
        margin-bottom:500px;
        position: relative;
        background-color:rgba(0,0,0,0.4);
        color:white;
    }

    h1{
        font-family: "sinanova-regularregular", sans-serif;
        font-size: 100px;
        text-align: center;
        color:white;
        margin-bottom: 10px;
    }

    #Classes div{
        font-family: "sinanova-regularregular";
        color:white;
        font-size: 40px;
    }
            #Class-Wrap{
        width:1500px;
        text-align: center;
        /*position: absolute;*/
        margin-left: 27%;
    }
    #Class1{
        /*position: fixed;*/
        font-family: serif;
        font-size: 20px;
        padding:40px;
        background-color:rgba(0,0,0,0.4);
        border-radius: 10px;
        float:left;
        margin-left: 50px;
        margin-right:500px;
        margin-top: 500px;
        width: 1000px;
    }
   #blank{
        height: 1500px;
    }

Javascript在路标上有一次悲伤的尝试，加上一个效果的脚本，当用户滚动到相应的页面时，该效果会突出显示每个数字：

$(document).ready(function(){
        console.log("hello");
        $('#title').fadeIn('slow');

        });

    $(window).scroll(function(){
        $('bortlescale').waypoint('sticky', {stuckClass: 'scaleStuck'});
    });

        var $scales = $('.bortlescale div'),
        $explanations = $('#Class-Wrap div'),
        winH = $(window).height(),
        topSpacing = 500;

    $explanations.height(winH);

    $(window).scroll(function(){

        var st = $(this).scrollTop();

        $explanations.each(function(index){
             var offset = $(this).offset(),
                 h = $(this).height();

            if(st >= offset.top - topSpacing && st < offset.top + h - topSpacing){
                $scales.eq(index).css({'background':'red'});
            }else{
                $scales.eq(index).css({'background':'none'});
            }
           }); 
       });

这就是我想要它做的事情：我希望#title和h2在文档加载时淡入，并在用户滚动到第一部分后逐渐淡出。然后我想要.bortlescale（显示为白色圆圈中没有填充的垂直白色数字行）从底部滚动到新页面并向右粘贴在页面左边缘的中间（所以它在哪里现在边缘，然后只是垂直居中）。我希望它能在其余的时间内保持在那里（还有其他8个部分，例如＃Class1，我没有包含空间用途，每个部分都会在用户向下滚动时显示）。当用户滚动到每个部分时，比例尺上的相应数字将突出显示。您也可以单击一个数字并将其添加到相应的部分说明中。

现在使用js，这一切都没有发生，甚至开头的淡入淡出，我认为这很简单。我认为它与一切都相互关联的方式有关，但我现在很丢失。有人可以帮助解释如何执行此操作或至少告诉我代码中的任何问题可以解释其中的一些问题吗？谢谢！

如何使单页的多个部分使用航点滚动不同类型的“粘性”

0 个答案: