第一篇博客

上线了,上线了! 澳门首家线上赌场上线了! 磨磨叽叽一个月, 最终上线了个连基础框架都没做好的博客, 还真是哈子卡西啊.
那么我的第一篇博客要讲什么呢? 大概就是…一个月之前搞的那个首页的导航栏吧.
最开始是在别的服务器上搞的wordpress做博客, 但是PHP还没有接触过搞得很难受(虽然那个博客也还是只有个架子什么内容都没有). 但是我还是看中了它的导航栏, 决定要自己做一个一样的, 呃, 至少是差不多的.
So…就重新做了一个首页. 喜欢知乎首页的那种风格, 并且以前也做过一个html/css的练习, 就直接照葫芦画瓢过来了. 然而最重要的两个部分—导航栏的固定在页面顶部以及侧栏的固定在页面特定位置也是折腾了好久.
首先是导航栏的, 去网上找了一下找到了个smartFloat(), 就很厚脸皮地照抄过来了, 自己改了一下想增加一下复用性然而最后发现只有导航栏用上了.

JavaScript

// smartFloat()来自于:http://www.cnblogs.com/bobodeboke/p/4565382.html
$.fn.smartFloat = function (dis, cla) {
  const position = function (element) {
    const top = element.offset().top; // 当前元素element距浏览器上边距
    $(window).scroll(function () { // 侦听滚动
      const scrolls = $(this).scrollTop();
      if (scrolls - top > dis) { // 如果滚动到页面超出了当前元素element的相对页面顶部的高度
        element.addClass(cla);
      }
      else {
        element.removeClass(cla);
      };
    });
  };
  return $(this).each(function () {
    position($(this));
  });
};

smartFloat()的原理主要是将页面滚动的距离与元素距上边框的距离相比较, 滚动距离大于等于上边框距离的时候就对元素addClass(). 说实话最开始看到那个函数的时候我是有些懵逼的, 搞不懂最后面的return()是怎么回事, 后来问了同学发现是因为内嵌的position()函数, 看来直接抄过来的函数还是用不明白呢.
剩下的就简单了, bootstrap里有个专门的类navbar-fixed-top, 可以保证navbar保持在窗口最上不随页面滚动, 那只要在滚动距离大于等于上边距的时候添加这个类就可以了.
其次就是侧边栏了.侧边栏的定位用到了bootstrap的affix类,需要引入bootstrap.js,可以在元素距窗口上边框的距离达到一定数值的时候变为affix,可以保证元素距窗口上边框的距离恒定(感觉上和导航栏的原理差不多啦…)
再就是侧边栏的宽度问题. 在调用控制台的时候发现affix的侧边栏不会随窗口宽度变化而自动变换, 就上网查了一下, 呃不, 是有一个affix的介绍里有写到这种状况, 解决方法就是在window.resize()的时候修改侧栏宽度. 方便起见在side-bar外面套了个outline, 这样就可以根据outline的宽度调整side-bar的宽度了.
很好, 这基本上就是首页的大致框架了, 由于现在博客还处于破破烂烂的状态, 本来想贴的代码也没有贴, 等以后学会用代码高亮插件之后再修改吧! 还有想要的截图也没有加进来, 啊啊啊先凑合看吧, 我会慢慢添加更多东西的.
想搞个ajax()在统一的页面框架下加载不同内容来着…但是好像不是很好弄, 就把文章直接粘贴进来啦!
2017-11-22(别问我为什么是22号,当然是因为那该死的拖延症.)