利用bootstrap的滚动监听+affix做一个侧导航landingpage

前段时间有个小的需求,要做一个带侧边导航的landingpage。这种页面直观点来说,就是类似百度百科一样,随着页面的滚动,在旁边的导航栏会跟踪你的页面,作为一个活动书签。如图,红框就是侧导航:

百度百科侧边导航

要是直接重新写的话,也是一件有工作量的事情,所以干脆直接用bootstrap框架,里面js插件有滚动监听和affix,结合起来就可以做出来类似的效果。

ps:用的是bootstrap3

滚动监听

bootstrap的scroll.js是用来滚动监听的,而使用起来最便利的方法是直接引用在html代码里加data属性。

滚动监听都需要被监听的组件是position: relative; 即相对定位方式。大多数时候是监听 元素,所以直接在body的style里面加上这个属性即可。

然后继续在body里面加data属性,一个是data-spy,一个是data-target
data-spy的值直接设置成"scroll"即可,而data-target则要设置成导航栏的id。实例代码如下:

<body style="position: relative;" data-spy="scroll" data-target="#navbar-example">
  ...



<div id="navbar-example">



<ul class="nav nav-tabs" role="tablist">
      ...
    </ul>



  </div>



  ...
</body>

affix固定侧导航

affix的英文意思粘贴的意思,顾名思义,它的作用就是是网页中的元素固定粘贴在某个位置,而我们的侧边栏恰好就是要这样的效果。

使用方法也很简单,在侧导航加一个data-spy="affix"属性就可以了,可选项为data-offset,可以是data-offset-top或者data-offset-bottom,比如data-offset-top="60",效果就是当页面距离顶部60像素之后,才开始固定这个元素(侧导航),如果不用这个可选项,则侧导航是一直黏在固定位置的。

侧导航landingpage例子

效果是这样的:https://www.lookfor404.com/langding-page-example.html

全程都是用的data属性,其中,affix的属性,我没有加上data-offset,另外就是对“返回顶端”写了几行jquery,返回顶端的时候有滚动效果,代码如下:

<script type="text/javascript">
    $(function(){  
            $("#back-to-top").click(function(){  
                $('body,html').animate({scrollTop:0},1000);  
                return false;  
            });  
      });
    </script> 

完整代码直接在网页右键–查看源代码就行了,这里就不贴出来了。

fontsquirrel:在线生成网页可用字体

前些天在做一个简单的网站外包,由于自己也是业余做着玩,前端的一些东西,也是边学边用,比如说,网站上用到一种专门的字体,而我手里只有ttf格式的字体文件,显然并不能适配所有的浏览器。

于是想到,是不是要把ttf格式转换为各种字体格式,上传到服务器,然后再在css中定义引用呢?

这个思路是可行的,问题在于怎么转格式。

辗转多次搜索,终于找到一个神器fontsquirrel,分享给大家。这个网站可以在线上传字体文件,然后他会自动生成各种供网页使用的字体文件,还有使用demo,非常方便。

地址:http://www.fontsquirrel.com/tools/webfont-generator

进入网站之后,点击upload,上传字体文件,等待网站自动生成各种文件即可,最后会给你打包到一个压缩包供你下载。默认的OPTIMAL已经够用,当然你如果需要自己定义一些高级特性,定义输出所有包括ttf,otf,woff,svg,eot格式的文件,可以选择EXPERT模式。

fontsquirrel上传字体

最后点击DOWNLOAD YOUR KIT即可。

下载之后,里面的文件就可以供我们所用了。

一般来说,网页引用字体,步骤如下:

首先css定义,其中的font-family是定义的字体名,之后可以引用,url对应的是字体文件的路径,可以是相对路径,也可以是绝对路径:

@font-face {
    font-family: '843-cai978regular';
    src: url('843-cai978-webfont.eot');
    src: url('843-cai978-webfont.eot?#iefix') format('embedded-opentype'),
         url('843-cai978-webfont.woff2') format('woff2'),
         url('843-cai978-webfont.woff') format('woff'),
         url('843-cai978-webfont.ttf') format('truetype'),
         url('843-cai978-webfont.svg#843-cai978regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

随后直接在html里面引用,或者定义到css类里面都可以,比如我直接内联css样式。

<p style="font-family: '843-cai978regular';>LOOKFOR404</p>

简单实用,有需要的朋友可以试试。

关于jquery中callback函数的使用

今天在做一个网站开发的过程中遇到了一个小问题,解决之后,发现这应该是很多学习jquery的新手朋友们会遇到的问题,故在这里记录一下。

基本需求和实现要点:这是一个购物网站,在用户点击“收藏店铺”或者“收藏商品”之后,用ajax把数据传递给后台进行处理,后台返回一个值给html,再由html根据返回的值,在页面上用一个模态框显示信息,随后模态框淡出。

在这里,为了简化问题,我们暂时不谈后台的处理。

似乎看上去,对模态框,用一个fadeout方法来处理就可以了,但是事实上,用户可能会进行连续多次的点击收藏,此时模态框就不一定能正确显示和淡出了。为此,我们自然而然的得到另外一种方案,就是在模态框淡出之后,删除该模态框元素,待下次再点击,再创建这个元素。

于是顺着这个思路,我犯了一个错误。

我在jquery中写了这么三句代码

$(document.body).append('<div id="top_alert">'+text+'</div>');
$('#top_alert').fadeOut(3000);  
$('#top_alert').remove();

按照往常编程的逻辑思维,元素fadeOut之后,被删除。而事实上,按照上面的写法,我们是看不到fadeOut的效果的,因为在我们还没看到效果,下面的remove已经起作用了,即元素已经被删除。

这里就是我们新手经常会犯的错误之一。

事实上,jquery给我们提供了callback函数这种机制,就是用来解决这个问题的。

我们常常看到一些jquery函数会有callback这个参数,比如

$(selector).fadeOut(speed,callback);

这里fadeOut方法的第二个参数callback,就是一个回调函数,意思就是说,在fadeOut 函数执行完之后,会执行callback函数。

回到刚开始的问题,此时就很明朗了。我只需要把$(‘#top_alert’).remove();这一句写进callback函数里面就行了。具体实现如下:

$(document.body).append('<div id="top_alert">'+text+'</div>');
$('#top_alert').fadeOut(3000,function(){
$('#top_alert').remove();

这样就可以不出错的实现该效果了。