zoukankan      html  css  js  c++  java
  • 博客园边栏滚动隐藏代码

     1 $(document).ready(function(){
     2 
     3 $(".cnblogs_code pre").addClass("prettyprint"); 
     4 $(".code").toggleClass("prettyprint"); 
     5 
     6 window.setTimeout(prettyPrint, 1000);
     7 var str = "<li><div id='closeside'><a class='close-sidebar' style='cursor:pointer;'>关闭侧边栏</a><a class='show-sidebar' style='display:none;cursor:pointer'>显示侧边栏</a></div></li>";
     8 $('#navList').html($('#navList').html()+str);
     9 
    10     var $sidebar   = $("#sideBar"),   
    11         $window    = $(window),   
    12         offset     = $sidebar.offset(),   
    13         topPadding = 15;   
    14   
    15     $window.scroll(function() {   
    16         if ($window.scrollTop() > offset.top) {   
    17             $sidebar.stop().animate({   
    18                 marginTop: $window.scrollTop() - offset.top + topPadding   
    19             });   
    20         } else {   
    21             $sidebar.stop().animate({   
    22                 marginTop: 0   
    23             });   
    24         }   
    25     });   
    26   
    27   
    28     $('.close-sidebar').click(function() {
    29         $("#content").css('background','none');
    30         $('.close-sidebar').hide();
    31         $('.close-sidebar,#sideBar').fadeOut(500);
    32         $('.show-sidebar').show();
    33         window.setTimeout(function(){
    34             $(".forFlow").css('margin','-18px 0 0 2px'); 
    35             $("#mainContent").css('background','url("http://pic002.cnblogs.com/images/2012/25317/2012072712554778.gif") no-repeat 2px 0px'); 
    36         },1000);
    37     });
    38 
    39     $('.show-sidebar').click(function() {
    40         $('.show-sidebar').hide();
    41         $('.close-sidebar').show();
    42         $(".forFlow").css('margin','-18px 0 0 235px'); 
    43         $("#mainContent").css('background','url("http://pic002.cnblogs.com/images/2012/25317/2012072712554778.gif") no-repeat 235px 0px'); 
    44         window.setTimeout(function(){
    45             $('#sideBar').fadeIn(500);
    46         },1000);
    47     });
    48 
    49 });   
  • 相关阅读:
    量身打造自己的MyEclipse(多图)
    DevExpress v17.2新版亮点—WPF篇(五)
    DevExpress WPF入门指南:绑定编辑器对话框
    MyEclipse 2017 Stable 2.0发布|附下载
    springmvc常用注解标签详解
    什么是SpringMVC?
    SpringBoot页面渲染
    怎样理解Spring的IOC和AOP?
    LESS 原理,一款css的预处理程序Less的使用
    移动端web app要使用rem实现自适应布局:font-size的响应式
  • 原文地址:https://www.cnblogs.com/meetrice/p/2611749.html
Copyright © 2011-2022 走看看