Question

我是jQuery的新用户，我构建了this页面，我想要发生的是当一个块e.g. 2011 1 October到达页面顶部时，它会显示该特定内容div通过id或date-attr。

当您点击date时，它会显示该日期的内容，但我希望一旦该日期块到达页面顶部就会显示。

到目前为止，我已经环顾网络但没有运气。

Answer 1

使用scroll事件检查您感兴趣的div - 例如为它们分类。 http://api.jquery.com/scroll/

在该事件回调中，您可以检查每个元素的位置 http://api.jquery.com/each/ 确定页面使用的位置元素 http://api.jquery.com/offset/ - 顶级组件但是不要取这个值 - 你需要减去由

返回的Window滚动位置

$(window).scrollTop()

在元素打开和关闭时制作一些边框值。

Answer 2

根据我的理解，您必须在“main.js”文件中添加一行代码。

// javascript + jquery scripts 

 // script for fading in content boxes -->
         $(".square").on("click", function() { 
            var id= $(this).attr("contentId");
            //$("#details");
            $('#details').fadeOut('slow', function() {
              $(this).html($("#" + id).html()).fadeIn('fast');
            });
        });

       // active link -->
        $(".square").click(function() {
            $(".square").removeClass("active");
            $(this).addClass("active");



            $("html, body").scrollTop($(this).position().top); // THIS IS THE LINE TO BE ADDED TO SCROLL TO THE CURRENT DATE ITEM           



        });

        // fade in main content div / intro
        $(document).scroll(function () {
            var y = $(this).scrollTop();   
            if (y > 10) {
                $('.topBlock').fadeOut();
            } else {
                $('.topBlock').fadeIn();
            }
        });

        // hide intro text onClick on list 
        $( "li" ).click(function() {
          $( ".topBlock" ).hide().animate();
        });

        var viewportHeight = $(window).height();
    //$j(".parallax_section_holder").css("height",$j(window).height()-116);
    //alert(viewportHeight);

我希望我已经解决了您的问题，如果没有，那么请在jsfiddle中提供确切的代码链接。

问候。

当“元素”到达页面顶部时显示div

2 个答案: