JS写一个导航栏一直在顶部的代码

可以参考以下代码：

HTML：

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

CSS：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  overflow: hidden;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

将以上代码加入到你的 HTML 和 CSS 中，就可以实现一个导航栏一直在顶部的效果。

相关问题

JS 写一个导航栏下划停留在顶部

可以通过CSS实现这个效果，具体步骤如下：

1. 为导航栏添加一个固定的位置，使其不随滚动条滚动：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

2. 在导航栏下面添加一个占位元素，使页面正常显示：

.navbar + .content {
  padding-top: 50px; /* 导航栏高度 */
}

3. 当页面滚动时，为导航栏添加一个下划线，并保持在顶部：

.navbar.scroll {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  border-bottom: 1px solid #ccc; /* 添加下划线 */
}

.navbar.scroll + .content {
  padding-top: 100px; /* 导航栏高度+下划线高度 */
}

$(document).scroll(function() {
  var navbar = $('.navbar');
  if ($(this).scrollTop() > navbar.height()) {
    navbar.addClass('scroll');
  } else {
    navbar.removeClass('scroll');
  }
});

上面的代码中，$(document).scroll()方法监控页面滚动的事件，如果scrollTop()的值大于导航栏的高度，则为导航栏添加一个scroll的CSS类，实现下划线固定在顶部的效果。

可以帮我写一个微信小程序顶部导航栏的滑动切换代码

当然可以，以下是一个简单的微信小程序顶部导航栏的滑动切换代码：

wxml 文件：

<view class="nav">
  <view class="nav-item {{currentTab == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">Tab 1</view>
  <view class="nav-item {{currentTab == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">Tab 2</view>
  <view class="nav-item {{currentTab == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">Tab 3</view>
</view>

<view class="content">
  <view class="tab {{currentTab == 0 ? 'active' : ''}}">Tab 1 Content</view>
  <view class="tab {{currentTab == 1 ? 'active' : ''}}">Tab 2 Content</view>
  <view class="tab {{currentTab == 2 ? 'active' : ''}}">Tab 3 Content</view>
</view>

wxss 文件：

.nav {
  display: flex;
  justify-content: space-between;
  padding: 10rpx;
  background-color: #fff;
}

.nav-item {
  font-size: 28rpx;
  color: #999;
  cursor: pointer;
}

.nav-item.active {
  color: #333;
  border-bottom: 2rpx solid #333;
}

.content {
  padding: 20rpx;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

js 文件：

Page({
  data: {
    currentTab: 0
  },
  switchTab: function(e) {
    this.setData({
      currentTab: e.currentTarget.dataset.index
    });
  }
});

这个代码实现了一个简单的顶部导航栏，用户可以通过点击不同的导航栏项来切换不同的内容。