湘声网-湖南政协新闻网

湘声网

湖南政协新闻网

湘声网是湖南省政协的官方网站，致力于为用户提供及时、准确、全面的信息和服务。网站内容涵盖了湖南省政协的各项工作动态、政策法规、会议资料、通知公告等多个方面，为广大政协委员和社会各界人士提供了一个便捷的信息交流平台。

导航栏与滚动效果

湘声网采用了响应式设计，通过CSS3的媒体查询技术实现了在不同设备上的自适应布局。页面顶部有一个简洁的导航栏，包括了主要的栏目链接，如新闻动态、政策法规等。同时，页面底部还有一个可折叠的菜单栏。

为了保证在页面滚动时导航栏始终可见，我们使用了jQuery来实现一个简单的滚动效果。当页面向下滚动时，导航栏会自动添加一个名为active的类，以便通过CSS设置导航栏的颜色或其他样式。反之，当页面向上滚动时，导航栏会移除这个类，恢复到默认状态。

以下是一段简化版的jQuery代码：

  
$(function() {  
// 头部导航条  
var $window = $(window);  
var $header = $(".headerbox");  
var $naviList = $(".headerbox .navilist .listbox");  
var $listArrow = $(".headerbox .jiantou");  
var naviListHeight = $naviList[0].offsetHeight;  
var top = $header.offset().top;  
  
// 当窗口大小改变时，重新计算导航栏高度和顶部位置  
$window.resize(function() {  
naviListHeight = $naviList[0].offsetHeight;  
top = $header.offset().top;  
$window.scroll();  
});  
  
// 当页面滚动时，更新导航栏状态  
$window.scroll(function() {  
if ($window.scrollTop() > top) {  
$header.addClass('active');  
} else {  
$header.removeClass('active');  
}  
});  
});  
  

这段代码首先获取了窗口对象、头部导航栏元素、导航列表和导航箭头元素。然后定义了一个变量naviListHeight用于存储导航列表的高度，以及一个变量top用于存储头部导航栏距离页面顶部的距离。接下来，我们为窗口对象绑定了一个resize事件，当窗口大小发生变化时，重新计算导航栏的高度和顶部位置。最后，我们为窗口对象绑定了一个scroll事件，当页面滚动时，根据滚动距离更新导航栏的状态。