问题：

addClass和removeClass（在viewport中）

终祯

2023-03-14

我正在处理一个时间线，它有一个日期元素，当它在viewport中时它就会变得可见。这里有一个链接-http://dtc-wsuv.org/jcohen/timeline/indexl.html

我的问题出在jQuery上。我是jQuery的初学者，我不确定哪里出了问题。没有检测到错误，但我希望它在视口中显示与元素关联的日期。现在，我认为jQuery在移除class.hide-date时遇到了麻烦，它具有display：none；感谢你的帮助！

jQuery：

<script>
            $(document).ready(function() {
                function monitor(event, visible) {    
                if (visible) {
                    $('.date-wrapper').window(function() {
                    $(this).find('time').removeClass('hide-date');
                });

                } else {
                    $(this).addClass('hide-date');
                }
            }



                var updateMarker = function() {
                    // Update measurements
                    var viewportHeight = $(window).height(),
                        contentHeight = $('#content1').height(),
                        pathWidth = $('#path').width(),
                        scrollPosition = $(window).scrollTop();

                    // Update #marker dimensions
                    $('.animate').width(scrollPosition/(contentHeight-viewportHeight)*pathWidth); 
                    // The breakdown: The line of code above defines scrollable distance by:
                    // Subtracting height of #content1 from height of viewport using (contentHeight-viewportHeight)
                    //This determines what percentage of the scroll has been scrolled through
                    // Multiply this percentage by #path width using *pathWidth
                }

                // Calls function when viewport is resized or scrolled    
                $(window).on('scroll resize', updateMarker);

                // Calls function on DOM ready
                updateMarker();
            });
        </script>

HTML：

<body>
        <!-- HTML Code for Timeline elements -->
        <div id='timeline'> <!-- Timeline's main container -->
            <div id='path'></div><!-- Timeline's inner path -->
            <div id='marker' class='animate'></div><!-- Timeline's animatable marker -->
        </div>



        <div id='content1'>
            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='1997-12'>Dec '97</time>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor turpis, consectetur vel libero a, mollis dapibus odio. Nunc lobortis, eros non tincidunt porttitor, purus tellus porta lectus, non luctus arcu augue eu est. Nunc malesuada ex elit, vel bibendum erat dictum nec. Proin imperdiet efficitur elit eu vestibulum. Nullam id augue tincidunt, efficitur nunc non, efficitur urna. Proin sit amet tincidunt purus. Sed interdum, felis quis facilisis malesuada, felis felis viverra lectus, eget euismod elit risus et mi. Mauris eu enim tellus. Aenean tincidunt orci nec tincidunt facilisis. Phasellus dignissim ante ut maximus feugiat. Mauris sollicitudin venenatis neque nec luctus. Quisque vel tempus urna, sed feugiat leo. Sed tellus magna, molestie non purus in, viverra condimentum orci. Nulla a nunc mauris. Aliquam convallis interdum velit, aa
            </p>

            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='1998-12'>Dec '98</time>
            </div>
            <p>
                Sed volutpat purus enim, eget accumsan odio ullamcorper sit amet. Sed vitae imperdiet metus. Aenean mollis mauris odio, eget finibus ligula ornare eu. Aliquam id velit quis tellus cursus imperdiet. Mauris eget laoreet ipsum, sed ultricies magna. Aliquam vel neque ut risus dapibus suscipit nec nec ipsum. Nullam vulputate, elit sit amet finibus sagittis, nunc nisl molestie sem, et tincidunt neque magna in nunc. Nullam aliquam mi et ante dapibus posuere. Vivamus aliquet ipsum sit amet tellus lacinia, vitae convallis odio aliquam. Mauris rhoncus, leo sit amet vulputate placerat, sem tortor fermentum ex, quis luctus nulla sapien consequat nunc.
            </p>

            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='1999-12'>Dec '99</time>
            </div>
            <p>
                Phasellus a pellentesque urna. Integer eget mattis nulla. Nullam sed diam ipsum. Fusce interdum scelerisque arcu, quis ultricies risus accumsan vel. Quisque luctus nisi a nisl porttitor, at finibus elit porttitor. Fusce eget mauris a magna sollicitudin volutpat. Sed nisl magna, volutpat quis mauris a, sagittis mollis nibh. Ut consectetur justo et sem convallis, at elementum purus hendrerit. Curabitur eros odio, ullamcorper vitae facilisis vel, congue sed mauris. Aliquam egestas augue nec scelerisque ornare. Integer et neque metus. Suspendisse aliquet scelerisque odio et ornare. Donec ac mi sed nunc interdum aliquet nec at lectus. Praesent eu tortor pretium, euismod tellus ut, scelerisque massa. Nullam eleifend malesuada magna rutrum gravida.
            </p>

            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='2000-12'>Dec '00</time>
                </div>
            <p>
                Phasellus ultricies elit ac turpis consequat, a suscipit tellus cursus. Aenean in consectetur turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui non ipsum pretium sagittis. Donec dictum, enim sit amet venenatis venenatis, ante purus malesuada neque, ac pellentesque eros turpis eu velit. Vestibulum ligula leo, aliquet et dignissim et, dapibus nec orci. Nullam ultrices sapien id imperdiet aliquam. Vestibulum id lorem finibus, condimentum magna mollis, interdum magna. Sed vel lorem feugiat, aliquam mauris non, consequat ante. Nunc eu sem et dui porta auctor. Nam tincidunt orci sed egestas tempor. Suspendisse euismod, arcu vitae porta sollicitudin, justo erat porta sem, vel suscipit odio lorem sit amet mi. Maecenas quis finibus elit.
            </p>

            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='2001-12'>Dec '01</time>
            </div>
            <p>
                Praesent eu ante eu est rutrum suscipit. Maecenas dictum massa eros, blandit fermentum dui ultrices et. Duis in orci eget nulla tincidunt rhoncus at et purus. Nunc porta ipsum vitae lacinia ornare. Vivamus laoreet odio quis urna porta blandit. In viverra molestie ornare. Nam lorem turpis, lacinia at lacus non, pharetra efficitur ipsum. Donec ultrices lacinia velit id eleifend. Integer pellentesque lectus tincidunt est porta, et elementum ex euismod. Vivamus lobortis at odio at interdum. Vestibulum posuere quam dolor, at rhoncus elit cursus nec. Proin mollis tincidunt libero quis convallis. Donec vel placerat dui, at cursus urna. Donec cursus eleifend dapibus.
            </p>


            <div class='date-wrapper animate'>
                <time class='hide-date' datetime='2002-12'>Dec '02</time>
            </div>
            <p>
                Praesent eu ante eu est rutrum suscipit. Maecenas dictum massa eros, blandit fermentum dui ultrices et. Duis in orci eget nulla tincidunt rhoncus at et purus. Nunc porta ipsum vitae lacinia ornare. Vivamus laoreet odio quis urna porta blandit. In viverra molestie ornare. Nam lorem turpis, lacinia at lacus non, pharetra efficitur ipsum. Donec ultrices lacinia velit id eleifend. Integer pellentesque lectus tincidunt est porta, et elementum ex euismod. Vivamus lobortis at odio at interdum. Vestibulum posuere quam dolor, at rhoncus elit cursus nec. Proin mollis tincidunt libero quis convallis. Donec vel placerat dui, at cursus urna. Donec cursus eleifend dapibus.
            </p>
       </div>
    </body>

</html>

CSS：

#timeline {
    width: 94%;
    height: 1%;
    margin: 1% 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #590C13;
    border-radius: 5px;
    }

#path {
    width: 100%;
    position: absolute;
    border-top: 3px solid #424343;
    }

#marker {
    width: 0;
    max-width: 100%;
    position: absolute;
    border-top: 3px solid #ffffff;
    }

.date-wrapper {
    width: 0;
    max-width: 94%;
    position: fixed;
    bottom: 7%;
    left: 3%;
    }

time {
    width: 50px;
    margin: 0 -35px;
    padding: 10px;
    position: absolute;
    bottom: 6%;
    right:  0;
    color: #ffffff;
    text-align: right;
    background-color: #424343;
    border-radius: 5px;
    }

.hide-date {
    visibility: hidden;
    }

p { /* This is place holder content used to test jQuery scroll position. Feel free to delete.  */
    padding: 3%;
    font-size: 2em;
    line-height: 3em;
    }

共有1个答案

乐正瑞

2023-03-14

更新：我想这就是你需要的：

http://jsfidle.net/sjf9p/37/

在某种程度上改变了你的代码。这里的主要要点是识别哪个

标记是可见的。

(function($){

    $.fn.visible = function(partial){

        var $t              = $(this),
            $w              = $(window),
            viewTop         = $w.scrollTop(),
            viewBottom      = viewTop + $w.height(),
            _top            = $t.offset().top,
            _bottom         = _top + $t.height(),
            compareTop      = partial === true ? _bottom : _top,
            compareBottom   = partial === true ? _top : _bottom;

        return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    };

})(jQuery);

$(document).ready(function() {

                var updateMarker = function(ev) {
                    // Update measurements
                    var viewportHeight = $(window).height(),
                        contentHeight = $('#content1').height(),
                        pathWidth = $('#path').width(),
                        scrollPosition = $(window).scrollTop();

                    // Update #marker dimensions
                    var widthVal = scrollPosition/(contentHeight-viewportHeight)*pathWidth;
                    $('.animate').width(widthVal); 
                    // The breakdown: The line of code above defines scrollable distance by:
                    // Subtracting height of #content1 from height of viewport using (contentHeight-viewportHeight)
                    //This determines what percentage of the scroll has been scrolled through
                    // Multiply this percentage by #path width using *pathWidth
                    if(widthVal > 0) {
                        $('.date-wrapper').find('time').addClass('hide-date');                         

                        $("p").each(function(){
                            if($(this).visible(true)) {
                                $(this).prev().find('time').removeClass('hide-date');
                            }
                        });


                    } else
                       $('.date-wrapper').find('time').addClass('hide-date');                        
                }

                // Calls function when viewport is resized or scrolled    
                $(window).on('scroll resize', updateMarker);

                // Calls function on DOM ready
                updateMarker();

            });

类似资料：

用jQuery动画addClass / removeClass

问题内容：我正在使用jQuery和jQuery-ui，并希望为各种对象设置各种属性的动画。为了在此说明问题，我将其简化为一个div，当用户将鼠标悬停在其上时，该分区从蓝色变为红色。使用时我可以得到想要的行为，但是这样做时，我要设置动画的样式必须在动画代码中，因此与样式表是分开的。（请参见示例1 ）一种替代方法是使用，但是我无法重新创建可以得到的确切行为。（请参见示例2 ）例子1 让我
原生js实现addclass,removeclass,toggleclasss实例

本文向大家介绍原生js实现addclass,removeclass,toggleclasss实例，包括了原生js实现addclass,removeclass,toggleclasss实例的使用技巧和注意事项，需要的朋友参考一下 jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素clas
原生javascript实现addClass,removeClass,hasClass函数

本文向大家介绍原生javascript实现addClass,removeClass,hasClass函数，包括了原生javascript实现addClass,removeClass,hasClass函数的使用技巧和注意事项，需要的朋友参考一下原生的addClass, removeClass, hasClass函数，未使用jquery class.js
.removeClass()

Categories: Effects | Effects Core | Method Overrides .removeClass( className [, duration ] [, easing ] [, complete ] )Returns: jQuery Description: 为每个匹配的元素移除指定的样式类名，而且所有改变的样式以动画的形式展示 .removeClass( cl
.addClass()

Categories: Effects | Effects Core | Method Overrides .addClass( className [, duration ] [, easing ] [, complete ] )Returns: jQuery 描述: 为每个匹配的元素添加指定的样式类名，而且所有改变的样式以动画的形式展示 .addClass( className [, dura
removeClass（class ）

描述 (Description) removeClass( class )方法从匹配元素集中删除所有或指定的类。语法 (Syntax) 以下是使用此方法的简单语法 - <i>selector</i>.removeClass( class ) 参数 (Parameters) 以下是此方法使用的所有参数的说明 - class - CSS类的名称。例子 (Example) 以下示例将删除第一段中的

addClass和removeClass（在viewport中）

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档