湘声网-湖南政协新闻网

湘声网

湖南政协新闻网

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

导航栏与滚动效果

湘声网采用了响应式设计，通过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事件，当页面滚动时，根据滚动距离更新导航栏的状态。