jquery滚动条滚动事件

js jquery 页面滚动到指定元素 jquery滚动条滚动事件_js

js jquery 页面滚动到指定元素 jquery滚动条滚动事件_js

How to handle scrolling with jQuery. Today we continue jQuery reviews, and our article will about event handling of scrollbar. Possible you saw such feature as ajaxy loading of new information when we scroll to end of page. As example here: http://www.dzone.com/links/index.html, or in your facebook page and other websites. Interesting feature isn’t it? Or, also will possible to stick some elements when our scroll moving out necessary positions. Or, we can handle events when scroller reach defined element at our page (and, as example – load some extra content on this event). Today I will show you how to do this.

如何使用jQuery处理滚动。 今天，我们继续进行jQuery评论，并且我们的文章将讨论滚动条的事件处理。 当我们滚动到页面末尾时，可能看到了诸如新信息的Ajaxy加载之类的功能。 例如此处：http://www.dzone.com/links/index.html，或在您的Facebook页面和其他网站中。 有趣的功能不是吗？ 或者，当我们的滚动条移出必要位置时，也可能会粘贴一些元素。 或者，当滚动条到达页面上已定义的元素时，我们可以处理事件(例如，在此事件上加载一些额外的内容)。 今天，我将向您展示如何执行此操作。

We will use new jQuery plugin – Waypoints. This small jQuery plugin allow us to perform different actions whenever we using scroller. As example – scrollint to some defined element. Firstly – lets check our prepared demo

我们将使用新的jQuery插件– Waypoints 。 这个小jQuery插件使我们在使用滚动条时可以执行不同的操作。 作为示例– scrollint到某些已定义的元素。 首先–让我们检查一下我们准备好的演示

Here are sample and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

(Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code.

这是我们的主页代码。

(index.html)
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
    <div id="nav-holder">
        <nav id="nav">
            <ul>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
            </ul>
        </nav>
    </div>
    <section id="container">
        <div class="post">
            <h1>Post number 1</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 2</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 3</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post" id="post4">
            <h1>Post number 4</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 5</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
    </section>
    <footer>
        <ul>
            <li class="more"><a href="other.php?step=1" title="Traditional navigation link">Next Page</a></li>
        </ul>
        <ul>
            <li><a class="top" href="#" title="Back to top">Top</a></li>
        </ul>
    </footer>
</div>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
    <div id="nav-holder">
        <nav id="nav">
            <ul>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
            </ul>
        </nav>
    </div>
    <section id="container">
        <div class="post">
            <h1>Post number 1</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 2</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 3</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post" id="post4">
            <h1>Post number 4</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
        <div class="post">
            <h1>Post number 5</h1>
            <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears. A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
        </div>
    </section>
    <footer>
        <ul>
            <li class="more"><a href="other.php?step=1" title="Traditional navigation link">Next Page</a></li>
        </ul>
        <ul>
            <li><a class="top" href="#" title="Back to top">Top</a></li>
        </ul>
    </footer>
</div>

Make attention that here we draw our navigation menu, five posts and in footer we prepared 2 elements: link to next page: other.php?step=1 and another element which will allow us to jump to top of page. By default that element will invisible (CSS).

请注意，在这里我们绘制导航菜单，五个帖子，并在页脚中准备了两个元素：链接到下一页：other.php？step = 1和另一个元素，该元素将使我们跳到页面顶部。 默认情况下，该元素将不可见(CSS)。

(Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

(css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{position:relative;background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
ol, ul {
  list-style: none outside none;
}
#nav-holder {
  height:30px;
}
#nav ul {
  width:500px;
  margin:0 auto;
  padding:0;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:14px;
  background:#333;
  color:#ddd;
}
#nav li {
  display:inline;
  padding:0 10px;
  border-left:1px solid #555;
}
#nav li:first-child {
  border-left:0;
}
.sticky #nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.sticky #nav ul {
  margin:0 auto;
  opacity:0.8;
}
#container {
  margin-bottom:16px;
}
.loading {
    left:0;
    bottom:0;
    width:100%;
    height:34px;
    line-height:34px;
    margin-top:-34px;
    background:#222;
    color:#fff;
}
.loading p {
    margin:0;
    text-align:center;
    -webkit-animation:pulse 2s infinite;
    font-weight:bold;
    text-transform:uppercase;
}
.top {
  position:fixed;
  right:15px;
  bottom:15px;
  width:50px;
  height:25px;
  padding-top:25px;
  line-height:25px;
  background:#333;
  color:#888;
  display:block;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  font-size:14px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  behavior:url(../PIE.htc);
  opacity:1;
  -webkit-transition:opacity 700ms linear;
  -moz-transition:opacity 700ms linear;
  transition:opacity 700ms linear;
}
.top:before {
  position:absolute;
  top:11px;
  left:14px;
  content:"";
  border-bottom:11px solid #888;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
}
.top:hover {
  color:#eee;
}
.top:hover:before {
  border-bottom-color:#eee;
}
.top.hidden {
  opacity:0;
}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{position:relative;background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
ol, ul {
  list-style: none outside none;
}
#nav-holder {
  height:30px;
}
#nav ul {
  width:500px;
  margin:0 auto;
  padding:0;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:14px;
  background:#333;
  color:#ddd;
}
#nav li {
  display:inline;
  padding:0 10px;
  border-left:1px solid #555;
}
#nav li:first-child {
  border-left:0;
}
.sticky #nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.sticky #nav ul {
  margin:0 auto;
  opacity:0.8;
}
#container {
  margin-bottom:16px;
}
.loading {
    left:0;
    bottom:0;
    width:100%;
    height:34px;
    line-height:34px;
    margin-top:-34px;
    background:#222;
    color:#fff;
}
.loading p {
    margin:0;
    text-align:center;
    -webkit-animation:pulse 2s infinite;
    font-weight:bold;
    text-transform:uppercase;
}
.top {
  position:fixed;
  right:15px;
  bottom:15px;
  width:50px;
  height:25px;
  padding-top:25px;
  line-height:25px;
  background:#333;
  color:#888;
  display:block;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  font-size:14px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  behavior:url(../PIE.htc);
  opacity:1;
  -webkit-transition:opacity 700ms linear;
  -moz-transition:opacity 700ms linear;
  transition:opacity 700ms linear;
}
.top:before {
  position:absolute;
  top:11px;
  left:14px;
  content:"";
  border-bottom:11px solid #888;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
}
.top:hover {
  color:#eee;
}
.top:hover:before {
  border-bottom-color:#eee;
}
.top.hidden {
  opacity:0;
}

(Step 3. JS)

Here are all used JS files. This is of course jQuery library itself + our new plugin:

这是所有使用过的JS文件。 这当然是jQuery库本身+我们的新插件：

(js/jquery-1.4.4.min.js and js/waypoints.min.js)
(js/main.js)
$(document).ready(function() {
    // Blink fast when we reached this element (post number 4)
    $('#post4').waypoint(function() {
       $(this).fadeOut(300).fadeIn(300);
    }, {
        offset: '50%',  // middle of the page
        triggerOnce: true
    });
    // ajaxy content
    var $loading = $("<div class='loading'><p>Loading more items ...</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };
    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('.example').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.post'));
            $loading.detach();
            if ($data.find('.more').length) {
                $('.more').replaceWith($data.find('.more'));
                $footer.waypoint(opts);
            } else {
                $('.more').parent().remove();
            }
        });
    }, opts);
    // nav menu
    $('#nav-holder').waypoint(function(event, direction) {
        $(this).parent().toggleClass('sticky', direction === "down");
        event.stopPropagation();
    });
    // goto 'Top' button
    $('.top').addClass('hidden');
    $.waypoints.settings.scrollThrottle = 25;
    $('.example').waypoint(function(event, direction) {
        $('.top').toggleClass('hidden', direction === "up");
    }, {
        offset: '-100%'
    });
});
$(document).ready(function() {
    // Blink fast when we reached this element (post number 4)
    $('#post4').waypoint(function() {
       $(this).fadeOut(300).fadeIn(300);
    }, {
        offset: '50%',  // middle of the page
        triggerOnce: true
    });
    // ajaxy content
    var $loading = $("<div class='loading'><p>Loading more items ...</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };
    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('.example').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.post'));
            $loading.detach();
            if ($data.find('.more').length) {
                $('.more').replaceWith($data.find('.more'));
                $footer.waypoint(opts);
            } else {
                $('.more').parent().remove();
            }
        });
    }, opts);
    // nav menu
    $('#nav-holder').waypoint(function(event, direction) {
        $(this).parent().toggleClass('sticky', direction === "down");
        event.stopPropagation();
    });
    // goto 'Top' button
    $('.top').addClass('hidden');
    $.waypoints.settings.scrollThrottle = 25;
    $('.example').waypoint(function(event, direction) {
        $('.top').toggleClass('hidden', direction === "up");
    }, {
        offset: '-100%'
    });
});

This is most interesting and important part of our project. Firstly I should to show you format of initialization of waypoints plugin. By default this is:

这是我们项目中最有趣，最重要的部分。 首先，我将向您展示路标插件的初始化格式。 默认情况下是： 

$('some_element').waypoint([handler], [options]);
$('some_element').waypoint([handler], [options]);

Both params – optional, here are from documentation:

这两个参数–可选，来自文档：

  • handler — function, optional param, – callback function called when the user scrolls past the element. The function signature is function(event, direction), where ‘event’ is a usual jQuery event object and ‘direction’ is a string, either ‘down’ or ‘up’ indicating which direction the user is scrolling.函数，可选param ，–用户滚动到元素上方时调用的回调函数。 函数签名是function(event，direction)
  • options — object, optional param, – map of options to apply to this set of waypoints, including where on the browser window the waypoint is triggered.对象，可选param

Now lets look to our most easy sample – where we will blink post (once) when the we scrolls to this element (at middle of page):

现在，让我们看一下最简单的示例–当我们滚动到该元素(在页面中间)时，我们将在此处闪烁一次(一次)： 

$('#post4').waypoint(function() {
       $(this).fadeOut(300).fadeIn(300);
    }, {
        offset: '50%',  // middle of the page
        triggerOnce: true
    });
$('#post4').waypoint(function() {
       $(this).fadeOut(300).fadeIn(300);
    }, {
        offset: '50%',  // middle of the page
        triggerOnce: true
    });

So, I created waypoint to element ‘#post4’, and handling event – scrolling to this element when it located at middle of page. This post should blink once (triggerOnce = true).

因此，我创建了指向元素'＃post4'的航点，并处理事件–当该元素位于页面中间时滚动到该元素。 该帖子应闪烁一次(triggerOnce = true)。

Another one sample – loading new posts when we reach end of page:

另一个示例–到达页面结尾时加载新帖子： 

var $loading = $("<div class='loading'><p>Loading more items ...</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };
    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('.example').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.post'));
            $loading.detach();
            if ($data.find('.more').length) {
                $('.more').replaceWith($data.find('.more'));
                $footer.waypoint(opts);
            } else {
                $('.more').parent().remove();
            }
        });
    }, opts);
var $loading = $("<div class='loading'><p>Loading more items ...</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };
    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('.example').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.post'));
            $loading.detach();
            if ($data.find('.more').length) {
                $('.more').replaceWith($data.find('.more'));
                $footer.waypoint(opts);
            } else {
                $('.more').parent().remove();
            }
        });
    }, opts);

As you can see, firstly I defined new loading element, options for waypoint. And, when we reached the bottom of the page I removing current waypoint, draw loading element, loading via $.get new content from my other.php, adding new posts, removing loading element, updating link to More, and, re-create waypoint again (for new positions). So, now its time to check our other.php file

如您所见，首先我定义了新的加载元素，即航点的选项。 并且，当我们到达页面底部时，我删除当前航路点，绘制加载元素，通过$ .get加载来自other.php的新内容，添加新帖子，删除加载元素，将链接更新为More，然后重新创建再次设置航路点(用于新位置)。 因此，现在该检查我们的other.php文件了

(Step 4. PHP)

(other.php)
<?
$iStep = (int)$_GET['step'];
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 6 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 7 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 8 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 9 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$i = ($iStep > 0)  ? ($iStep-1) : 0;
if (count($aPosts) > $i) {
    echo '<div class="results">';
    echo $aPosts[$i];
    if (count($aPosts) > $iStep) {
        echo '<div class="more"><a href="other.php?step=' . ($iStep + 1) . '">Next Page</a></div>';
    }
    echo '</div>';
}
?>
<?
$iStep = (int)$_GET['step'];
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 6 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 7 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 8 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$aPosts[] = <<<EOF
<div class="post">
    <h1>Post number 9 (loaded ajaxy)</h1>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
    <p>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</p>
</div>
EOF;
$i = ($iStep > 0)  ? ($iStep-1) : 0;
if (count($aPosts) > $i) {
    echo '<div class="results">';
    echo $aPosts[$i];
    if (count($aPosts) > $iStep) {
        echo '<div class="more"><a href="other.php?step=' . ($iStep + 1) . '">Next Page</a></div>';
    }
    echo '</div>';
}
?>

In begining – I defined array of all posts (sure that in your project anything will in database). After, depends on accepted param ‘step’ we will draw necessary result, plus – link new updated link to another results (other.php?step=2, other.php?step=3 etc)

首先，我定义了所有帖子的数组(确保在您的项目中，任何内容都将存储在数据库中)。 之后，根据可接受的参数“步骤”，我们将绘制必要的结果，以及–将新的更新链接链接到另一个结果(other.php？step = 2，other.php？step = 3等)

Here are continue of documentation. Functions and options of waypoint:

这是文档的继续。 航点的功能和选项：

  • $(‘some_element’).waypoint(‘destroy’) – this function will fully unregister current waypoint, unbind all waypoint event handlers.
  • $(‘some_element’).waypoint(‘remove’) – this function will unregisters the elements as waypoints and wipes any custom options, but leaves the ‘waypoint.reached’ events bound. Calling ‘$(‘some_element’).waypoint’ again in the future would re-register the waypoint and the old handlers would continue to work.
  • $(‘some_element’).waypoint.defaults – default options of object that is extended when calling ‘.waypoint’. It have next properties: $('some_element')。waypoint.defaults –调用'.waypoint'时扩展的对象的默认选项。 它具有下一个属性：
  • offset — number | string | function (default: 0), – tell us how far the top of the element must be from the top of the browser window to trigger waypoint. It can be a number, which is taken as a number of pixels, a string representing a percentage of the viewport height, or a function that will return a number of pixels. Example – offset: ‘100%’
  • 数字| 字符串 函数(默认值：0)
  • boolean (default: false), – if true, the waypoint will be destroyed when triggered.布尔值(默认：false)

Also we can perform work with all created waypoints. All waypoints registered through $.waypoints(). Here are possible functions and options:

我们也可以使用所有创建的航路点执行工作。 通过$ .waypoints()注册的所有路标。 以下是可能的功能和选项：

  • $.waypoints(‘refresh’) – that function will perform recalculation of all waypoint`s trigger point based on its offset value. By default this called automatically (whenever the window is resized, new waypoints are added, or a waypoint’s options are modified). If your project is changing the DOM structure or page layout without doing one of these things, you may want to manually call this refresh.
  • $.waypoints(‘viewportHeight’) – that function will return the height of the viewport, adjusting for inconsistencies that come with calling ‘$(window).height()’ in iOS. Recommended for use within any offset functions.
  • $.waypoints.settings – settings, which determine some of the plugin`s behavior: $ .waypoints.settings –设置，用于确定插件的某些行为：
  • boolean (default: true), – determines which waypoints to trigger events for if a single scroll change passes more than one waypoint. If false, only the last waypoint is triggered and the rest are ignored. If true, all waypoints between the previous scroll position and the new one are triggered in order.布尔值(默认值：true)
  • number (default: 200), – the refresh performed during window resizes is throttled. This value is the rate-limit in milliseconds between resize refreshes.数字(默认值：200)
  • number (default: 100), – checking for any crossed waypoints during the window scroll event is throttled. This value is the rate-limit in milliseconds between scroll checks. (You can notice that we already using ‘scrollThrottle’ in our sample)数字(默认值：100)
现场演示

(Conclusion)

Today we review new interesting jQuery plugin which can enhance user interface of your website. If is you were wondering – do not forget to thank. I would be grateful for your interesting comments. Good luck!

今天，我们回顾一个有趣的新jQuery插件，它可以增强您网站的用户界面。 如果您想知道，请别忘了感谢。 谢谢您提出的宝贵意见。 祝好运！

翻译自: https://www.script-tutorials.com/scrollbar-jquery-event-handling-using-waypoints/

jquery滚动条滚动事件