1、html

<div id="header"> 向下滚动查看效果 </div>
<div id="top"> 顶部导航 </div>
<div id="prew">
  <div id="main">
    <h2> 方法/步骤 </h2>
    <ol>
      <li>
        <div class="main_step on"> 1 </div>
        <p> 试用后油法，将面团揉成团，面包机30分钟即可！牛奶要用凉的，因为面包机揉面温度较高！ </p>
        <img src="http://www.jq22.com/img/cs/500x300.png"> </li>
      <li>
        <div class="main_step"> 2 </div>
        <p> 揉好的面团，用手抻开可以抻成薄一些的膜，有一定的扩展性！ </p>
        <img src="http://www.jq22.com/img/cs/500x300.png"> </li>
      <li>
        <div class="main_step"> 3 </div>
        <p> 然后揉成团，放入面包机中就行第一次发酵，发酵约1小时，是原面团的2倍大！用手按下去无回缩就证明发酵好了！ </p>
        <img src="http://www.jq22.com/img/cs/500x300.png"> </li>
      <li>
        <div class="main_step"> 4 </div>
        <p> 发酵好的面团排气揉光滑，称重 </p>
        <img src="http://www.jq22.com/img/cs/500x300.png"> </li>
      <li>
        <div class="main_step"> 5 </div>
        <p> 将面团平均分成5份，揉成光滑的面团！盖上保鲜膜醒发15分钟 </p>
        <img src="http://www.jq22.com/img/cs/500x300.png"> </li>
    </ol>
    <div id="slide">
      <ul>
        <li class="on"> 1 </li>
        <li> 2 </li>
        <li> 3 </li>
        <li> 4 </li>
        <li> 5 </li>
        <li> 6 </li>
        <li> 7 </li>
        <li> 8 </li>
        <li> 9 </li>
      </ul>
    </div>
  </div>
</div>

2、css

html,body {
    background:#FFF;
}
#header {
    width:1071px;
    height:654px;
    margin:0 auto;
}
#prew {
    width:1071px;
    margin:10px auto;
}
#main {
    width:680px;
}
#main h2 {
    font-weight:normal;
    font-size:22px;
    color:rgba(50,50,50);
    line-height:40px;
    border-bottom:1px solid #ddd;
}
#main ol {
    margin:30px 0 0 18px;
}
#main ol li {
    width:630px;
    border-left:2px dotted #ddd;
    position:relative;
    padding-left:30px;
}
#main ol li .main_step {
    width:32px;
    height:32px;
    background-image:url(http://www.jq22.com//tp/dcf035a7-8a07-45be-a043-de902c697981.png);
    background-position:0px -34px;
    color:#fff;
    text-align:center;
    line-height:32px;
    position:absolute;
    left:-16px;
}
#main ol li .main_step.on {
    background-position:0px 0px;
}
#main ol li p {
    line-height:25px;
    margin-bottom:15px;
}
#main ol li img {
    padding-bottom:35px;
    display:block;
}
#top {
    width:100%;
    min-width:1071px;
    height:40px;
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:9;
    border-bottom:1px solid #ddd;
    box-shadow:0 2px 5px #ddd;
    background-color:#262626;
    color:#FFFFFF;
}
#slide {
    width:32px;
    position:fixed;
    top:42px;
    margin-left:44px;
    background:#fff;
    text-align:center;
}
#slide ul li {
    width:32px;
    height:32px;
    background-image:url(http://www.jq22.com//tp/dcf035a7-8a07-45be-a043-de902c697981.png);
    background-position:0px 32px;
    color:#fff;
    text-align:center;
    line-height:32px;
    display:none;
    cursor:pointer;
}
#slide ul li.on,#slide ul li.hover {
    background-position:0px 0px;
}

3、js

$(function() {

    var $top = $('#top');
    var $step = $('.main_step');
    var stepLength = $step.length;
    var $slideLi = $('#slide ul li');

    $(window).scroll(function() {
        var scrollTop = $(document).scrollTop();
        scrollTop >= 150 ? $top.show() : $top.hide();
        var index = 0;

        $step.each(function(i) {
            var a = $(this).offset().top - $(document).scrollTop();
            if (a < (42 + 32 * i)) {
                $slideLi.eq(i).show();
                index = i + 1;
            } else {
                $slideLi.eq(i).hide();
            }
        });
        $step.eq(index).addClass('on').parent().siblings().find('.main_step').removeClass('on');
        index && $slideLi.eq(index - 1).addClass('on').siblings().removeClass('on');
    });

    $slideLi.click(function() {
        var index = $(this).index();
        $('body,html').animate({
            scrollTop: $step.eq(index).offset().top
        },
        500);
    }).hover(function() {
        $(this).addClass('hover');
    },
    function() {
        $(this).removeClass('hover');
    });

});

运行效果：