我正在尝试找出如何在导航页下方跟踪导航栏的位置,以便导航栏到达顶部时,它会粘在顶部,直到您返回为止。我在stackoverflow和其他示例中尝试了很多选项,但是没有运气。
这是我的代码。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Mainactivity">
<LinearLayout
android:id="@+id/no_internet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
android:background="#e8eaf6"
android:layout_centerInParent="true"
android:gravity="center" >
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/no_wifi" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#404852"
android:gravity="center"
android:textSize="25dp"
android:text="Internet indisponible" />
</LinearLayout>
</RelativeLayout>
以及导航组件的html
import {
Component,OnInit,HostListener,ElementRef,ViewChild,AfterViewInit
} from "@angular/core";
import { ScrollDispatcher } from "@angular/cdk/scrolling";
@Component({
selector: "app-nav",templateUrl: "./nav.component.html",styleUrls: ["./nav.component.css"]
})
export class NavComponent implements OnInit,AfterViewInit {
@ViewChild("stickyMenu",{ static: true }) menuElement: ElementRef;
sticky: boolean = false;
elementPosition: any;
constructor(
private el: ElementRef,private scrollDispatcher: ScrollDispatcher
) {}
ngOnInit() {
window.addEventListener("scroll",this.onWindowScroll,true);
}
ngAfterViewInit() {
this.scrollDispatcher
.ancestorScrolled(this.el)
.subscribe(event => this.onWindowScroll());
this.elementPosition = this.menuElement.nativeElement.offsetTop;
}
@HostListener("window:scroll",['$event'])
onWindowScroll() {
const windowScroll = window.pageYOffset;
console.log("sss",windowScroll,this.elementPosition);
}
}