html - Angular 2 show and hide scroll button -


i have button shows on right corner when make first scroll down move. want make button disappear after scroll on page. how can this? far, typescript function track($event:any){} looks this:

import { component } '@angular/core';   @component({     host: {'(window:scroll)': 'track($event)'} })   export class directsearchcomponent{     showscrollbutton:boolean=false;     beginy: any;   constructor() {}   track($event:any) {     console.debug("scroll event", $event);     if (this.beginy == undefined || this.beginy != null) {         if (this.beginy > $event.scrolly) {             this.showscrollbutton = false;         }         else {             this.showscrollbutton = true;         }     }     else {         this.beginy = $event.scrolly;         this.showscrollbutton = true;     }       }  }

and html code button looks this:

  <a href="#" class="scrollup">        <button *ngif="showscrollbutton"              type="button" class="btn btn-primary btn-block pull-right"                     style="position: fixed; bottom: 10px; right: 51px;                             width:3%; overflow:auto;">                 <i class="glyphicon glyphicon-chevron-up" ></i>        </button>      </a>

thanks in advance!

looks this.beginy not being initialized properly.

import ngoninit , in ngoninit method, set...

this.beginy = document.documentelement.scrolltop || document.body.scrolltop;

this should initialize variable initial page scroll value.


Comments

Post a Comment

Popular posts from this blog

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

android - ConstraintLayout: Realign baseline constraint in case if dependent view visibility was set to GONE -

Image
is there way realign baseline constraint textview in case if dependent view visibility set gone? my layout code: <android.support.constraint.constraintlayout android:layout_width="match_parent" android:layout_height="wrap_content"> <textview android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test title" android:textcolor="@color/black" android:textsize="24sp" app:layout_constraintleft_toleftof="parent" app:layout_constraintright_torightof="parent"/> <textview android:id="@+id/subtitle1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="subtitle 1" android:textsize="11sp" app:layout_constraintb...
Read more

c# - Populating Gridview inside Listview ItemTemplate On Web User Control from Code Behind -

i have think simple question, might more complex.. i have spent few days looking answer on google , various questions on site cannot seem come right. what trying bind gridview on user control ascx page default.aspx.cs on page load event. user control markup follows: <%@ control language="c#" autoeventwireup="true" codebehind="vulnerabilityexternalip.ascx.cs" inherits="vulnerabilityassesment.controls.vulnerabilityexternalip" %> <asp:table runat="server" cellpadding="1" cellspacing="2"> <asp:tablerow> <asp:tablecell> <asp:label id="lblvulnerabilityname" runat="server" text="vulnerability name:" cssclass="itemname"></asp:label> </asp:tablecell> <asp:tablecell> <asp:label id="lblvulnerabilitynametext" runat="server" text='<%# eval("mainvulnerabilityname")...
Read more