1回答
我有一个简单的问题，就是如何使用Vue创建固定的滚动导航栏。
我创建了一个jQuery代码，但我想迁移到Vue
我在名为navbar.js的文件中将代码更新为Vue JS
jQuery代码
$(document).ready(function fixedHeader() {
var windows = $(window);
var screenSize = windows.width();
var sticky = $('#f-navbar');
var $html = $('html');
var $body = $(
浏览 1提问于2020-04-22得票数 0
我想创建一个在某些组件上移动的粘性侧边栏。CSS的sticky属性允许我(AFAIK)只能在创建它的组件内移动，所以我的问题是-让sticky侧边栏只在某些组件上移动的最佳解决方案是什么？固定的位置设置为一切，我需要它只为跨3-4组件。 export default function Home() {
return (
<div className={styles.container}>
<Navbar />
<LandingPage />
{* fr
浏览 38提问于2021-07-18得票数 0
1回答
div组件不是固定的，但sticky变量是真的。为什么？ import React, { useEffect } from 'react'
export default function Navbar(props) {
const DESKTOP_Y = 250
const MOBILE_Y = DESKTOP_Y / 2
let sticky = false
const handleScroll = () => {
console.log(window.innerWidth + ' ' + window.scrollY
浏览 27提问于2019-12-22得票数 0
回答已采纳
我有一个第三方图书馆，我想使用。它有一个特殊的道具，允许您传入用于获取DOM元素并返回底部值的字符串。
<Sticky bottomBoundary="#some-id">
<MyChildComponentMightBeANavigationOrAnything />
</Sticky>
组件接受id并确定底部值，以便知道何时将自己从粘滞状态中释放出来。这个id基本上是DOM中的另一个元素。因此，当该元素的底部值到达视图端口的顶部时，允许粘性组件在用户滚动时向上移动。我遇到的问题是我需要增加一个偏移量。Sticky组件允许您传递一个
浏览 1提问于2018-07-30得票数 2
回答已采纳
1回答
我有粘性标题当页面滚动它是固定在顶部的page.when我点击在标题页的菜单必须滚动到那个特定的div.For粘性标题我正在使用angular.for滚动普通java脚本window.scroll()。但是window.scroll()不能准确地滚动。 //tickyheader.html <div #stickyMenu [class.sticky]="sticky">
<div class="header">
<div class="navbar">
<ul>
浏览 31提问于2019-07-03得票数 0
1回答
我在isActive中找不到像这样的道具，可以像一样很容易地禁用粘性。是否有可能在语义用户界面反应粘稠的情况下做到这一点？我尝试让context道具在Sticky中为空，但滚动时仍然很粘稠。
粘性代码：
export default class StickyAdjacentContextExample extends Component {
state = {}
handleContextRef = contextRef => this.setState({ contextRef })
render() {
const { contextRef } = this.s
浏览 1提问于2017-09-04得票数 1
回答已采纳
我创建了这样一个函数：
type MainProps = { sticky: boolean, refStickyElement: any };
export const MainBlog = ({ sticky, refStickyElement }: MainProps,mposts: TPost[]) => {
...
但是，当我想在另一个函数中使用这个函数时，我得到了错误：
const {results} = data
let posts: Array<TPost> = results;
<MainBlog refStickyElement={elem
浏览 9提问于2022-04-25得票数 0
我试图在这样的滚动事件中使用Material向元素添加一个类。
const useStyles = makeStyles({
sticky: {
position: 'fixed',
top: 0,
width: '100%',
}
});
export default function myBar() {
React.useEffect(() => {
const myBar = document.getElementById("myBar");
const sticky =
浏览 0提问于2021-02-11得票数 1
回答已采纳
我在试着让div在反应上粘稠。
所以我包括了这个包裹--黏性的。
并将div放在StickyContainer组件之间。
我没有看到任何错误，但它仍然不起作用。
你能告诉我怎么修吗，这样以后我就自己修。
提供下面的沙箱和代码片段。
class App extends React.Component {
render() {
console.log("App---->");
return (
<StickyContainer>
{/* Other elements can be i
浏览 1提问于2019-01-16得票数 1
回答已采纳
我希望将数据传递到组件中，但如果可能的话，我希望将属性的名称存储在变量中，例如
<app-note-form-sticky [foreign_key_column]="foreign_key_value"></app-note-form-sticky>
其中"foreign_key_column“是一个变量，它保存了我希望在组件中填充的属性的名称。有可能吗？
任何建议都是非常感谢的。
浏览 1提问于2017-02-03得票数 1
回答已采纳
2回答
直接设置Angular2自定义元素的样式并使用CSS选择器选择它们有什么禁忌吗？
示例：
// HTML
<My-Page>
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page>
// CSS
My-Page {
background-color: grey;
}
header {
...
}
.sticky-fo
浏览 2提问于2016-09-16得票数 2
1回答
使服务生命周期独立于活动
、、、、
我的服务通常由用于BroadcastReceiver的RECEIVE_BOOT_COMPLETED启动，并使用START_STICKY标志实现，如下所示：
@Override
public int onStartCommand(Intent intent, int flags, int startId) {
return Service.START_STICKY;
}
因此，在很多情况下，当用户启动应用程序时，服务已经在后台运行了。然后，我的活动绑定到它来读取服务中的信息。
但是，当用户停止活动(通过终止应用程序)时，我已经在运行的服务现在也被破坏了，然后通过start_stic
浏览 1提问于2014-12-06得票数 3
回答已采纳
我正在尝试创建一个React回调，它允许我将状态从子传递给父级。然而，我得到的是"cbChildToParent: undefined“。我不知道怎么解决它。
下面是我的父母代码：
import React from 'react';
import ProjectsHeader from './ProjectsHeader.jsx';
import ProjectsBody from './projectsbodycomponents/ProjectsBody.jsx';
export default class Projects e
浏览 2提问于2016-10-21得票数 0
回答已采纳
我试图通过p:growl类将primefaces的p:growl位置更改为使用position: sticky。但是，由于组件是在body的末尾呈现的，所以该位置的relative行为并不像我所希望的那样工作。
有任何方法来使用这个组件的sticky位置吗？还是让组件在声明的地方呈现的方法？
PrimeFaces 5.1；Mojarra2.1；
浏览 0提问于2019-08-02得票数 0
回答已采纳
如何使我在NavBar上声明的状态NavBar可能在呈现中发送键和值，以便显示以下视图：
()
翡翠：
div(id="app")
CSS：
$orange: #FC7C00;
body {
font-family: 'Lato', sans-serif;
}
.wrapper {
height: 100vh;
}
.contents {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
height:
浏览 3提问于2016-03-28得票数 1
回答已采纳
1回答
这里，我将引导类用于sticky top头。
header.js
<header className="header sticky-top">HEADER</header>
样式表
header {
overflow: hidden;
padding: 20px 10px;
display: inline-flex;
width: 100%;
height: fit-content;
background-color: blue;
}
body {
margin: 0;
height: 100vh;
overflow:
浏览 2提问于2021-05-07得票数 1
回答已采纳
当LazyDataModel load方法加载数据时，我需要显示一条消息。我使用primefaces growl来显示消息，并使用下面的代码从load方法更新它，但它不工作(在UI上看不到任何消息)。请指出我做错了什么，这似乎与load方法的异步行为有关，但我不确定如何修复它。 JSF Bean - @ManagedBean(name = "cData")
@ViewScoped
public class DataPage implements Serializable {
/**
*
*/
private static final l
浏览 36提问于2021-09-05得票数 1
1回答
我有这段代码，它的目标是如果滚动位置大于0，则将数据sticky更新为true export default {
components: {
},
data() {
return {
menuVisible: false,
sticky: false,
}
},
mounted() {
this.checkScroll()
},
methods: {
checkScroll() {
document.querySelector('body').onscroll = function
浏览 66提问于2019-12-05得票数 0
回答已采纳
我需要一个“粘性”指令，当它位于页面顶部时，它会向元素中添加一个css类，并指示其状态的变化。因此，我定义了一个类似于{ onStickyChange: '&' }的范围。现在我想在angularjs组件中使用该指令，如下所示：
<my-component sticky on-sticky-change="$ctrl.onStickyChange(sticky)">
</my-component>
当被粘贴/未粘贴时，我希望指令会通知父控制器。但是，我得到了以下错误：
错误：$compile:multidir多个指令myComp
浏览 4提问于2017-07-19得票数 1
回答已采纳
我的组件代码如下：
import React, { Component } from 'react';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css";
import {
Table
} from 'reactstrap';
const Adhoc = async (props) => {
let cost = await props.cost(props.adhoc._id)
return(
<
浏览 3提问于2019-11-28得票数 1
我试图添加ReactStrap模式到我的NavBar，但无法找到解决方案。我创建了一个处理程序函数，它将在click事件上被调用，但是我无法在这个处理程序函数上调用我的登录组件。我还将处理程序绑定到当前的DOM。我所做的只是简单地称为登录组件，它不起作用。请解释如何将组件称为父组件。
代码：login.js
import React from 'react';
import {
Button,
Form,
FormGroup,
// FormText,
Label,
Input,
Modal,
ModalHeader
浏览 3提问于2018-12-10得票数 1
回答已采纳
我想使用来创建我的页眉和页脚组件。
App.js：
class App extends React.Component {
render() {
return (
<div>
<Header />
<SomeContent />
</div>
);
}
}
Header.js：
class Header extends Rea
浏览 0提问于2016-07-01得票数 0
1回答
我刚刚开始了一个关于6.5.1基金会的新项目(最近一次)。我是通过npm安装的，所有的东西都运行得很好，但是我在编译的CSS中遇到了问题，而不是仅仅使用_settings文件中的一些变量。更改主颜色、全局半径、网格列计数和字体系列在我编译的css中没有更改，但是全局宽度和其他设置似乎是按预期工作的。有人能帮忙吗？
我有一个主app.scss，我在第一行中导入了_settings，这是一个普通的基金会设置文件，它本身包含基础组件等。我不知道为什么某些变量更改工作，而其他变量没有效果。
我的任务似乎工作/编译很好，但这里只是以防万一.
var gulp = require('gulp&
浏览 1提问于2019-01-25得票数 0
1回答
我正在尝试理解angular 6中的延迟加载，
下面是我的应用程序的树：
─src
├───app
│ ├───components
│ │ ├───about
│ │ ├───clients
│ │ ├───footer
│ │ ├───how-it-
│ │ ├───partner
│ │ ├───project
│ │ ├───team
│ │ ├───whatwed
│ │ └───why-cho
│ ├───layout
│ │ └───main-la
│ └───
浏览 2提问于2018-08-27得票数 0
回答已采纳
是否有一种方法可以在Blazor组件中的子组件上设置css类？
我现在拥有的是：
@using Microsoft.AspNetCore.Components;
@inherits ComponentBase
<div class="button-group-wrapper">
@SecondaryButton
<div class="floating-sticky-wrapper">
@PrimaryButton
</div>
</div>
@code {
[P
浏览 0提问于2020-03-05得票数 5
1回答
我有一个包含两个部分(navbarTop和navbarbottom )的导航条；当scrollY大于110时，navbarTop将显示，而当用户向上滚动时，navbarTop将显示出来，但是我的问题是，每个组件在每个滚动之后都会被重新调用，甚至向下滚动，或者当导航底部已经存在，并且用户滚动起来时，它仍然在调用该组件。以下是代码：
const Navbar: FC = () => {
const [stickyHeader, setStickyHeader] = useState(false);
const [stickyMenu, setStickyMenu] = useState(f
浏览 13提问于2022-05-19得票数 0
回答已采纳
我的表单输入字段是否需要取决于API数据集。但是当它是强制性的，我需要禁用按钮，直到用户输入一些值。我是一个绝对的初学者反应形式的角度。需要专家的帮助才能做到这一点。
<div class="a">
<at-card *ngIf="selectedId$|async" class="b">
<at-detail [selectedDetail]="selectedDetailModel$|async">
</at-detail>
浏览 4提问于2020-08-28得票数 0
回答已采纳
2回答
我有下面的代码，
export default class CampaignTrustSticky extends Component {
constructor(props) {
super(props);
this.state = {
showTrustBlock: false
};
}
render () {
let { showTrustBlock } = this.state;
return(
<section
className={classNames('trust-stick
浏览 1提问于2018-10-13得票数 1
回答已采纳
1回答
我已经创建了一个标题，我试图使它的宽度100%的屏幕，但当我缩小屏幕大小，它不适合屏幕(缩小宽度)。这是我的css
<Box
style={{
backgroundColor: "RGB(46, 180, 195)",
height: "60px",
padding: "12px",
width:"100vw",
position: "sticky",
top: 0,
浏览 2提问于2022-01-06得票数 0
回答已采纳
1回答
我正试图整理一下语义用户界面站点是如何制作他们的粘性侧菜单的。
和你一起滚动的菜单。
它位于left rail或right rail内部，与它们的或中的示例不同，它调整大小以适应视图端口的大小，而不是在更改页面宽度时将其推入视图端口或容器中。
下面是一个示例JSFiddle：
运行片段全屏并调整窗口大小以了解我的意思.
$('.ui.sticky').sticky({
context: $('.ui.container')
});
<script src="https://ajax.googleapis.com
浏览 2提问于2017-01-23得票数 1
3回答
TL;DR: Sticky真的能够对我通过JavaScript所做的改变做出反应吗？如果是，怎么做？
(该项目使用的是Foundation6.2和WordPress 4.4，主题安装使用Node.js/npm和GUP4.0。详细地说，我的问题用粗体表示。)
我想让nav条粘性使用基金会的粘性插件，但只有当我点击一个按钮。这意味着，当DOM全部完成时，nav栏不应该“单独”粘贴，而应该保持在文档中的最高位置。此外，它应该消失时滚动下来，但坚持时，滚动上升。
nav条被正确地包装在所有所需的div中，因此nav条能够粘贴。问题出现在“额外”部分。我的想法是首先使用PHP实例化Sticky：
<
浏览 6提问于2016-02-28得票数 102
我正试图找出如何在React中实现window.addEventListener。我正在用盖茨比开发一个网站，在“开发”环境下，它可以工作，但是每当我开始生产时，它就会出错。这是我的密码：
const checkHeader = () => {
// Detect scroll position
let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 1100) {
let scrollPositio
浏览 1提问于2020-05-09得票数 1
回答已采纳
1回答
我在一个Angular4应用程序上使用Zurb Foundation框架。我在几个组件上使用了它的不同元素(如下拉菜单、accordion等)，每次我运行这个应用程序时都会收到很多警告，比如：
foundation.min.js:3 Tried to initialize responsive-toggle on an element that already has a Foundation plugin.
foundation.min.js:3 Tried to initialize accordion on an element that already has a Foundation
浏览 0提问于2017-10-03得票数 2
3回答
让我们研究下一个场景：
我创建了一个新的android应用程序，包括一个应用程序类、一个活动和一个后台服务。
我在应用程序类中有一些static变量，假设它是一个int = 0；
我启动activity，并从activitie的onCreate()启动service，服务将获得START_STICKY标志。
这个service所做的就是使用TimerTask将当前秒写入应用程序类中的变量。5.我退出活动
一段时间后，Android将关闭服务和应用程序(假设设备资源不足)，并重新启动服务，因为使用了START_STICKY标志。
现在我要问：
当操作系统杀死应用程
浏览 3提问于2013-03-07得票数 13
回答已采纳
我正在尝试让一个元素始终保持在屏幕的顶部，滚动时保持低调。我发现position: 'sticky'为普通的超文本标记语言做这件事。我想知道有没有什么东西可以添加到我的css中，使元素在使用react-native滚动时停留在一个位置。
浏览 0提问于2021-11-26得票数 0
即使jquery在angular2应用程序中不受限制，您也可以在某些情况下真正使用它，比如需要包含一些功能依赖jquery的高级FrontEnd框架。在我的问题中，我包括了我的angular2应用程序的语义UI。Im不遵循角度集成，因为它正处于开发阶段，而且由于某种原因，您可以在angular2应用程序中运行jquery，所以我想您可以使用传统的安装和集成。
然而，在实现粘性ui时，我遇到了一些语义ui的功能错误。例如：
$('.ui.sticky').sticky();
Typescript不允许产生此错误的粘滞()函数：
Property 'sticky'
浏览 7提问于2017-08-31得票数 0
回答已采纳
1回答
在所有视图中显示的粘性导航条
、、、、
如何使用uikit使响应性粘稠的导航条在桌面上工作
这是我尝试过的
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar" style="b
浏览 0提问于2019-04-02得票数 0
回答已采纳
我的问题是让我的粘性导航跨越整个页面的宽度。我正在使用来自的jQuery粘性导航插件--我已经尝试将宽度设置为100%，但是有一个element.style属性正在覆盖容器宽度。在研究了这个问题之后，这个element.style值似乎来自于这个插件的javascript。我对代码很陌生，而且我的javascript知识有限，因此任何关于如何更改/删除element.style值的指导都将不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.
浏览 3提问于2016-09-15得票数 0
回答已采纳
使用mode: "dark"在我的材料UI主题去饱和我的AppBar的颜色。将其切换到mode: "light"可以防止此问题的发生。
我的主题是这样设置的：
const theme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#1c7eea"
}
}
});
我的AppBar是这样创建的：
<AppBar position="sticky" ena
浏览 10提问于2022-09-29得票数 0
回答已采纳
1回答
我处理服务和返回代码: START_NOT_STICKY。我不想重新启动服务。
但是文档中说，“除非有待定的意图，否则不要重新创建服务。”你能给我一个例子，这些挂起的意图导致重新启动服务吗？
浏览 2提问于2015-10-28得票数 1
回答已采纳
2回答
我正在使用i18n库在Vue.js中进行语言翻译。我想在其中导入我的脚本并在数据中存储一个值，但是我在导入它时遇到了困难。我该怎么进口呢？我试过使用import $t from "./i18n";，但这只会返回以下错误：Module not found: Error: Can't resolve './i18n'
这是我的代码：
script>
import Header from "../components/Header";
import $ from "jquery";
import $t from "
浏览 12提问于2020-11-26得票数 2
回答已采纳
我使用的Office组件有一个布局问题。这可能是特定于该框架中的组件，也可能不是特定的，但我将将其描述为flexbox中的一般HTML/CSS问题。通常，我试图设计一个包含两个网格(DetailsList)组件的布局，每个组件位于一个页面类型容器(Pivot)中。我还需要标签标题和搜索框固定在顶部，一个按钮固定在底部(不管列表在网格中有多短)。如果列表的内容很长，我只希望滚动条在网格中可见，而不是父容器(否则您必须向下滚动以查看重要的Button)。
我可以使用ScrollablePane组件使这个布局在没有数据透视的情况下工作。如下所示：
然而，我不知道如何设计这一点，以便枢轴导航
浏览 1提问于2019-05-24得票数 2
1回答
我正在开发一个网站，我不想贴我的头组件。我正在使用react和react-sticky库从开发
这是我使用sticky的文件。
import React from 'React'
import { StickyContainer, Sticky } from 'react-sticky'
class main extends React.Component {
render () {
return (
<StickyContainer>
<Sticky>
{({style})
浏览 0提问于2018-09-05得票数 0
2回答
我想在滚动时使表格theader粘滞，这样滚动时总是能看到表格的标题。
我试过了，但什么也没做。
React渲染：
<table class="table text-center align-middle" style={{ width: this.state.PercentTable }}>
<thead class="bgColor stickyHeader">
<tr>
<th style={{ width: "3%", paddingRight: &
浏览 1提问于2018-11-16得票数 1
2回答
const useStyles = makeStyles({
navbar: {
colorPrimary: "#FFFFFF",
},
});
const Login = () => {
const classes = useStyles();
return (
<AppBar position="sticky" classes={classes.navbar}>
<Toolbar>
<h1>Test</h1>
</Toolba
浏览 8提问于2022-05-03得票数 0
我需要做好我的标签栏标题，这是在一个抽屉打开。这是我尝试过的。
安德建议做出反应不知何故它不起作用。原因可能是抽屉卷轴等。即使我隐藏抽屉卷轴，并为标签体创建一个卷轴，粘性是不工作的。
蚂蚁粘性Referans：
反应-粘性包装：
position: -webkit-sticky;
position: sticky;
top: 0;
我也尝试了很努力的css，但它也不起作用。
浏览 2提问于2021-08-06得票数 1
回答已采纳
我正在使用下面的代码来使我的应用程序全屏，但当有人锁定他的手机，然后解锁它全屏关闭：
ngOnInit(): void {
this.goFullscreen();
}
private goFullscreen() {
if (androidApp && device.sdkVersion >= '21') {
const View = android.view.View;
const window = androidApp.startActivity.getWindow();
const
浏览 11提问于2020-05-14得票数 0
我在导航栏组件中有头像和菜单组件。我想通过点击阿凡达组件来触发菜单组件的功能。我的问题是如何将clickEvent从头像传递到菜单组件。 <AppBar position="sticky" className={classes.navBarStyle}>
<Toolbar>
<Avatar alt="" className={classes.userAvatar} src="./avatar.jpg"/>
<DropDownMenu/&
浏览 44提问于2021-01-21得票数 0
回答已采纳
我正在使用npm包作为聊天屏幕。一切都按照我的要求进行，但是当一个聊天屏幕加载时，它会从上到下滚动，而不是从底部开始(最后一次聊天)。当页面加载时，我希望它保持在底部。在这个中，左边的容器在页面加载时粘在底部，我想要这样的东西。
import ScrollToBottom from 'react-scroll-to-bottom';
const Content = () => {
return (
<>
<ScrollToBottom
checkInterval={17}
initialScrollBehav
浏览 4提问于2022-10-06得票数 0
1回答
在我的反应应用程序中，我尝试了很多不同的路由器、路由和解决方案。
事实上，我在我的应用程序中使用的是来自react-router-dom的react-router-dom和redux。
当我在浏览器中更改url时，将触发正确的路由，并加载正确的组件。
这一问题：
当我点击<Link>组件的url更改，路由器上的history道具会改变，但是应用程序中什么都不会发生.
下面是我的应用程序架构和代码：
MainApp.jsx
render(){
<Provider store={store}>
<HashRouter>
<div
浏览 0提问于2018-03-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
