js实现搜索框吸顶的代码

以下是一个简单的基于 JavaScript 的搜索框吸顶代码:

window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var searchBox = document.getElementById('search-box');
    if (scrollTop >= 100) {
        searchBox.style.position = 'fixed';
        searchBox.style.top = '0';
    }
    else {
        searchBox.style.position = 'static';
    }
}

其中，`search-box` 是搜索框的 id，scrollTop 获取当前滚动条距离顶部的高度。当滚动条高度大于等于 100 时，搜索框的定位为固定，位置在最上方（即“吸顶”）；否则搜索框恢复正常流定位。

相关问题

javascript 怎么实现导航栏吸顶效果，请用代码解释

好的，以下是Javascript实现导航栏吸顶效果的代码：

// 获取导航栏元素和滚动条距离顶部的距离
var nav = document.getElementById("nav");
var topDistance = nav.offsetTop;

// 监听滚动事件
window.addEventListener("scroll", function() {
  // 获取滚动条距离顶部的距离
  var distance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

  // 判断滚动条是否已经滑过导航栏
  if (distance > topDistance) {
    // 如果滑过了，添加固定定位样式
    nav.classList.add("fixed");
  } else {
    // 如果没有滑过，移除固定定位样式
    nav.classList.remove("fixed");
  }
});

在上面的代码中，我们首先获取导航栏元素和导航栏距离顶部的距离，然后监听滚动事件，获取滚动条距离顶部的距离。如果滚动条距离顶部的距离大于导航栏距离顶部的距离，就给导航栏元素添加固定定位样式，否则移除该样式，从而实现导航栏吸顶效果。

Android studio搜索框吸顶态

在Android Studio中实现搜索框吸顶态，可以使用CoordinatorLayout和AppBarLayout来实现。首先，你需要在布局文件中使用CoordinatorLayout作为根布局，并在其中添加AppBarLayout和搜索框的布局。然后，将搜索框的布局包裹在一个CollapsingToolbarLayout中，设置其属性app:layout_scrollFlags="scroll|enterAlways"，这样当你向下滑动时，搜索框会自动吸顶。最后，将搜索框的布局包裹在一个NestedScrollView中，以实现列表的滑动效果。通过设置layout_behavior属性为com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior，使得AppBarLayout和列表的滑动能够联动起来。这样，当你向上滑动列表时，搜索框会重新出现在顶部。\[2\]\[3\]这样就可以实现Android Studio中搜索框的吸顶态了。
#### 引用[.reference_title]
- *1* [Android studio页面布局实现固定顶部和底部导航栏，中间可滑动](https://blog.csdn.net/hjjshua/article/details/124172951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [号称最难用的布局CoordinatorLayout实现标题栏折叠吸顶](https://blog.csdn.net/qq_33235287/article/details/121855763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]