在不同部分/页面中更改页脚中的内容（单个滚动网站）

Question

我遵循了其他人（http://jsfiddle.net/U7d2y/54/）提供的这个jsfiddle。我希望左下角的信息从“菜单”和“关于”页面上的社交媒体图标更改为“联系人”页面上的版权页信息（“网页设计”）。

然而，尽管遵循上面显示的jsfiddle的结构，我的代码不起作用，如果有人可以帮我看看会很好。我也在使用twitter bootstrap。感谢。

JS FIDDLE：http://jsfiddle.net/kn02jvL3/14/（不幸的是没有工作）

HTML：

    <div class="footer">
        <p id="address">
            21 Road
        </a></p>

        <div id="nav">
            <span id="nav_link">(i)</span>
            <span id="nav_hover">
                <ul>
                    <li><a href="#menu">menu</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </span>
        </div>

        <div id="footer_left">
            <ul>
                <li class="social_media" class="active"><a href="#menu">
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                    <div class="instagram"></div>
                </a></li>
                <li class="social_media"><a href="#about">
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                    <div class="instagram"></div>
                </a></li>
                <li id="colophon"><a href="#contact">Web Design by</a></li>
            </ul>
        </div>

    </div>

<div class="container-fluid">
    <div class="row vertical-align">

        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 left-col">
        </div>

        <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 content">

                <div id="menu">
                    <p class="menu_info">
                        The food </p>   </div>


            <div id="about">
                <p class="about_header">OUR RESTAURANT</p>
                <p class="about_info"> Latin (curare) stands for hospitality or “to take care of”, is headed by Chef-Owner Walsh, who has conceptualized a creative space where a seamless experience of top-notch food, drink and service is delivered in a casual yet refined environment.</p>
            </div>


            <div id="contact">

                <p id="hours">Opening Hours:<br>Mon-Sat:Dinner from 6:30pm<br>Thurs & Fri:Lunch from 12:00pm</p><br>

                <p id="add">Find Us at:<br>21 Road</p>

            </div>

        </div>

        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 right-col">     
        </div>

    </div>

</div>

CSS：

#footer_left li{
    display:none;
}

#footer_left li.active{
    display:block;
}

.social_media{
    z-index:5;
    display:block;

    position:fixed;
    margin-right:50px;
    margin-bottom:50px;
    right:0;
    bottom:0;
    float:right;
}

SCRIPT：

        $('body').scrollspy({ 
            target: '#footer_left' 
        });