jquery - 在恒星视差中向 "fixed"img 添加一个类

Question

我正在将恒星视差用于网站

演示: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

我使用的文件来自 webtuts: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

我想要实现的目标是向中心的“固定”img 添加一个类，并根据事件的数据幻灯片更改它。

当我单击菜单按钮时，我能够更改图像类别，但当我使用滚动条导航时，图像类别不会更改。

所以我尝试添加这个脚本:

$(document).ready(function() {     
  if ($('#quatre').hasClass('active')){     
    $('#circle').addClass('trans4');    
  }     
  else(){    
    $('#circle').removeClass('trans4');;     
  }});
});

as #second 是幻灯片的 id，#img-center 是页面中心图像的 id，但不起作用

我也尝试过这段代码:

if(dataslide == 4){
    $('#circle').addClass('trans4');    
}

但这也不起作用

我完全是 javascript 的新手，我找不到方法来做到这一点。

这是 HTML

<ul class="navigation">
    <li id="un" data-slide="1"></li>
    <li id="deux" data-slide="2"></li>
    <li id="trois" data-slide="3"></li>
    <li id="quatre" data-slide="4"></li>
</ul>

<div id="circle"></div>

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
    <!-- start content -->
    <div class="content clearfix">
        <div class="name">
            <h1>NOM</h1>
        </div>

        <div class="txt">
            <h2>some text</h2>
        </div>
    </div><!-- end content -->

    <a class="button" data-slide="2" title=""></a>
</div>

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
    <div class="content">
        <div class="txt">
            <h3>some text</h3>
        </div>
    </div>

    <a class="button" data-slide="3" title=""></a>
</div><!--End Slide 2-->

<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
    <div class="content">
        <div class="txt">
            <h3>some text</h3>
        </div>
    </div>
<a class="button" data-slide="4" title=""></a>
</div><!--End Slide 3-->

<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
    <ul>
        <li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-55"alt=""></li>
        <li class="rond" data-stellar-ratio="1.25" data-stellar-vertical-offset="-53"alt=""></li>
        <li class="rond" data-stellar-ratio="2.7" data-stellar-vertical-offset="-150"alt=""></li>
        <li class="rond" data-stellar-ratio="3" data-stellar-vertical-offset="-100"alt=""></li>
        <li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-75"alt=""></li>
        <li class="rond" data-stellar-ratio="2.2" data-stellar-vertical-offset="-55"alt=""></li>
        <li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""></li>
        <li class="rond" data-stellar-ratio="2" data-stellar-vertical-offset="-15"alt=""></li>
        <li class="rond" data-stellar-ratio="1.3" data-stellar-vertical-offset="-150"alt=""></li>
        <li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""></li>
        <li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-55"alt=""></li>
        <li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""></li>
        <li class="rond" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt=""></li>
        <li class="rond" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt=""></li>
        <li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""></li>
    </ul>
    <div class="content">
        <div class="txt">
            <h3>some text</h3>
        </div>
    </div>
</div><!--End Slide 4-->

这是js

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


    //initialise Stellar.js
    $(window).stellar();

    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    //Setup waypoints plugin
    slide.waypoint(function (event, direction) {

        //cache the variable of the data-slide attribute associated with each slide
        dataslide = $(this).attr('data-slide');

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the previous navigation link 
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the next navigation link 
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
    //from navigation link slide 2 and adds it to navigation link slide 1. 
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }



    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });

    if(dataslide == 4){
        $('#circle').addClass('trans4');    
    }


});

Answer 1

这只在页面加载时触发一次:

$(document).ready(function() {     
if ($('#quatre').hasClass('active')){     
$('#circle').addClass('trans4');    
}     
else(){    
$('#circle').removeClass('trans4');;     
}});

每次窗口滚动时都会触发，我相信这就是您想要的:

$(window).scroll(function() {     
if ($('#quatre').hasClass('active')){     
$('#circle').addClass('trans4');    
}     
else(){    
$('#circle').removeClass('trans4');;     
}});